模型管理功能开发。
This commit is contained in:
parent
6def9f51f2
commit
99f7f1ede0
|
|
@ -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) {
|
||||
return request({
|
||||
|
|
@ -57,3 +66,11 @@ export function getProTypeListApi() {
|
|||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
//业主单位
|
||||
export function getUnitListApi() {
|
||||
return request({
|
||||
url: '/owner/listSelect',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -176,3 +176,12 @@ aside {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.map-overlay {
|
||||
position: absolute;
|
||||
top: 1%;
|
||||
right: 1%;
|
||||
width: 20%;
|
||||
height: 5%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div>
|
||||
<el-form :model="addOrEditForm" :rules="addOrEditFormRules" ref="addOrEditFormRef" label-width="100px">
|
||||
<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 label="上级节点" prop="deviceCode">
|
||||
<el-select
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<el-form-item label="设备类型名称" prop="typeName">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.typeName" placeholder="请输入设备类型名称"/>
|
||||
<el-input v-model="addOrEditForm.typeName" maxlength="26" placeholder="请输入设备类型名称"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<el-form-item label="备注" prop="remark">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.remark" placeholder="请输入备注"/>
|
||||
<el-input v-model="addOrEditForm.remark" maxlength="26" placeholder="请输入备注"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</el-form-item>
|
||||
|
||||
<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 label="设备保管人" prop="userId">
|
||||
<el-select
|
||||
|
|
@ -30,6 +30,7 @@
|
|||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
maxlength="26"
|
||||
type="textarea"
|
||||
v-model="addOrEditForm.remark"
|
||||
placeholder="请输入备注"
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
placeholder="选择领用时间"
|
||||
value-format="yyyy-MM-dd"
|
||||
v-model="useOrReturnForm.useTime"
|
||||
:picker-options="pickerOptionsToday"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
|
@ -47,6 +48,7 @@
|
|||
placeholder="选择归还时间"
|
||||
value-format="yyyy-MM-dd"
|
||||
v-model="useOrReturnForm.returnTime"
|
||||
:picker-options="pickerOptionsToday"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
|
@ -76,6 +78,12 @@ export default {
|
|||
returnTime: '',
|
||||
},
|
||||
userList: [],
|
||||
pickerOptionsToday: {
|
||||
disabledDate(time) {
|
||||
// 禁用今天之前的日期(不含今天)
|
||||
return time.getTime() < Date.now() - 8.64e7; // 8.64e7 = 24 * 60 * 60 * 1000
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<el-form-item label="层级配置名称" prop="levelSettingName">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.levelSettingName" placeholder="请输入层级配置名称" />
|
||||
<el-input maxlength="26" v-model="addOrEditForm.levelSettingName" placeholder="请输入层级配置名称" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
>
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="item.levelName" placeholder="请输入节点" />
|
||||
<el-input maxlength="26" v-model="item.levelName" placeholder="请输入节点" />
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<el-input v-model="addOrEditForm.deviceName" disabled />
|
||||
</el-form-item>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@
|
|||
<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-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 label="层级配置" prop="level">
|
||||
<el-select v-model="form.level" placeholder="请选择层级配置" style="width: 100%">
|
||||
|
|
@ -145,7 +145,7 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
<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>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
v-show="!showLayerDialog"
|
||||
>
|
||||
<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 label="模型URL" prop="modelUrl" v-show="false">
|
||||
<el-input v-model="useOrReturnForm.modelUrl" placeholder="上传后自动填充" />
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<el-form-item label=" 模型版本" prop="version">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="useOrReturnForm.version" placeholder="请输入模型版本"/>
|
||||
<el-input maxlength="26" v-model="useOrReturnForm.version" placeholder="请输入模型版本"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<el-form-item label="设计人员" prop="designer">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="useOrReturnForm.designer" placeholder="请输入设计人员"/>
|
||||
<el-input maxlength="26" v-model="useOrReturnForm.designer" placeholder="请输入设计人员"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -48,7 +48,7 @@
|
|||
<el-form-item label="版本描述" prop="remark">
|
||||
<el-row>
|
||||
<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-row>
|
||||
</el-form-item>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<el-form-item label="业主单位名称" prop="unitName">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.unitName" placeholder="请输入业主单位名称"/>
|
||||
<el-input maxlength="26" v-model="addOrEditForm.unitName" placeholder="请输入业主单位名称"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<el-form-item label="业主单位负责人" prop="unitMan">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.unitMan" placeholder="请输入业主单位负责人"/>
|
||||
<el-input maxlength="26" v-model="addOrEditForm.unitMan" placeholder="请输入业主单位负责人"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<el-form-item label="业主单位负责人电话" prop="phone">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.phone" placeholder="请输入业主单位负责人电话"/>
|
||||
<el-input maxlength="11" v-model="addOrEditForm.phone" placeholder="请输入业主单位负责人电话"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<el-form-item label="业主单位地址" prop="address">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.address" placeholder="请输入业主单位地址"/>
|
||||
<el-input maxlength="26" v-model="addOrEditForm.address" placeholder="请输入业主单位地址"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<el-form-item label="备注" prop="remark">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.remark" placeholder="请输入备注"/>
|
||||
<el-input maxlength="26" v-model="addOrEditForm.remark" placeholder="请输入备注"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -75,6 +75,13 @@ export default {
|
|||
addOrEditFormRules: {
|
||||
unitName: [{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"
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<el-form-item label="项目类型名称" prop="typeName">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.typeName" placeholder="请输入项目类型名称"/>
|
||||
<el-input maxlength="26" v-model="addOrEditForm.typeName" placeholder="请输入项目类型名称"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<el-form-item label="备注" prop="remark">
|
||||
<el-row>
|
||||
<el-col :span="20">
|
||||
<el-input v-model="addOrEditForm.remark" placeholder="请输入备注"/>
|
||||
<el-input maxlength="26" v-model="addOrEditForm.remark" placeholder="请输入备注"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@
|
|||
<el-table-column label="项目名称" align="center" prop="proName"/>
|
||||
<el-table-column label="层级配置" align="center" prop="level"/>
|
||||
<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="remark" width="180"/>
|
||||
<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-form ref="form" :model="form" :rules="addOrEditRules" label-width="auto">
|
||||
<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 label="层级配置" prop="level">
|
||||
<el-select v-model="form.level" placeholder="请选择层级配置" style="width: 100%">
|
||||
|
|
@ -127,8 +128,19 @@
|
|||
</el-select>
|
||||
</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-input v-model="form.chargePerson" placeholder="请输入负责人"/>
|
||||
<el-input maxlength="26" v-model="form.chargePerson" placeholder="请输入负责人"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="项目所在地" prop="location">
|
||||
|
|
@ -156,7 +168,7 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
<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>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
|
|
@ -250,9 +262,8 @@
|
|||
</template>
|
||||
|
||||
<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 {BaiduMap, BmNavigation, BmView, BmGeolocation, BmCityList, BmLocalSearch} from 'vue-baidu-map'
|
||||
|
||||
export default {
|
||||
name: 'Post',
|
||||
|
|
@ -296,17 +307,20 @@ export default {
|
|||
proName: '', // 项目名称
|
||||
level: '', // 层级配置
|
||||
proType:'', // 项目类型
|
||||
unit:'', // 单位id
|
||||
chargePerson: '', // 负责人
|
||||
location: '', // 项目所在地
|
||||
longitude: '', // 经度
|
||||
latitude: '', // 纬度
|
||||
remark: '', // 备注
|
||||
|
||||
},
|
||||
// 表单校验
|
||||
addOrEditRules: {
|
||||
proName: [{required: true, message: '项目名称不能为空', trigger: 'blur'}],
|
||||
level: [{required: true, message: '请选择层级配置', trigger: 'change'}],
|
||||
proType: [{required: true, message: '请选择项目类型', trigger: 'change'}],
|
||||
unit: [{required: true, message: '请选择业主单位', trigger: 'change'}],
|
||||
chargePerson: [{required: true, message: '请输入负责人', trigger: 'blur'}],
|
||||
location: [{required: true, message: '请选择项目所在地', trigger: 'blur'}],
|
||||
longitude: [{required: true, message: '请选择项目所在地', trigger: 'blur'}],
|
||||
|
|
@ -315,6 +329,7 @@ export default {
|
|||
|
||||
levelList: [],
|
||||
proTypeList: [],
|
||||
unitList: [],
|
||||
|
||||
searchAddress: '',
|
||||
marker: null,
|
||||
|
|
@ -324,6 +339,7 @@ export default {
|
|||
this.getList()
|
||||
this.getLevelList()
|
||||
this.getProTypeList()
|
||||
this.getUnitList()
|
||||
},
|
||||
methods: {
|
||||
async getLevelList() {
|
||||
|
|
@ -340,6 +356,11 @@ export default {
|
|||
this.proTypeList = res.data
|
||||
},
|
||||
|
||||
async getUnitList() {
|
||||
const res = await getUnitListApi()
|
||||
this.unitList = res.data
|
||||
},
|
||||
|
||||
/** 查询岗位列表 */
|
||||
getList() {
|
||||
this.loading = true
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@
|
|||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<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 label="勘查内容" prop="surveyContent" style="width: 100%">
|
||||
<el-input v-model="form.surveyContent" placeholder="请输入勘查内容" />
|
||||
|
|
|
|||
|
|
@ -1,82 +1,121 @@
|
|||
<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>
|
||||
|
||||
<script>
|
||||
import { listProject } from '@/api/basic/project'
|
||||
import {listProject, listMain} from '@/api/basic/project'
|
||||
import {listUser} from "@/api/system/user";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
markers: [],
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
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) => {
|
||||
this.addMarker(item)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取所有项目
|
||||
async getProjectList() {
|
||||
const {rows: res} = await listProject({
|
||||
proId: this.queryParams.proId,
|
||||
pageNum: 1,
|
||||
pageSize: 1000,
|
||||
})
|
||||
|
||||
// 地图初始化
|
||||
initMap() {
|
||||
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.$nextTick(() => {
|
||||
if (!this.map) {
|
||||
this.initMap()
|
||||
}else{
|
||||
this.map.clearOverlays(); // 清除所有覆盖物
|
||||
}
|
||||
|
||||
// 添加标记点
|
||||
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), // 图标锚点,使图标底部中心点与坐标点重合
|
||||
})
|
||||
if (res.length > 0) {
|
||||
res.forEach((item) => {
|
||||
this.addMarker(item)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 创建marker并应用自定义图标
|
||||
const marker = new BMapGL.Marker(point, {
|
||||
icon: icon,
|
||||
})
|
||||
// 地图初始化
|
||||
initMap() {
|
||||
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在标点下方并居中
|
||||
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)
|
||||
this.map.addOverlay(marker)
|
||||
|
||||
// 创建信息窗口内容
|
||||
const infoWindow = new BMapGL.InfoWindow(`
|
||||
// 创建自定义图标,设置为#002db6颜色
|
||||
|
||||
// 添加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;">
|
||||
<h3 style="color: #002db6; margin: 0 0 10px 0; font-size: 18px;">${item.proName}</h3>
|
||||
<p>负责人: ${item.chargePerson}</p>
|
||||
|
|
@ -84,29 +123,30 @@ export default {
|
|||
</div>
|
||||
`)
|
||||
|
||||
// 为label也添加相同的鼠标事件,提升用户体验
|
||||
label.addEventListener('mouseover', () => {
|
||||
this.map.openInfoWindow(infoWindow, point)
|
||||
})
|
||||
// 为label也添加相同的鼠标事件,提升用户体验
|
||||
label.addEventListener('mouseover', () => {
|
||||
this.map.openInfoWindow(infoWindow, point)
|
||||
})
|
||||
|
||||
label.addEventListener('mouseout', () => {
|
||||
this.map.closeInfoWindow(infoWindow)
|
||||
})
|
||||
},
|
||||
label.addEventListener('mouseout', () => {
|
||||
this.map.closeInfoWindow(infoWindow)
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getProjectList()
|
||||
},
|
||||
created() {
|
||||
this.getProjectList()
|
||||
this.getList()
|
||||
},
|
||||
|
||||
updated() {
|
||||
this.getProjectList()
|
||||
},
|
||||
updated() {
|
||||
this.getProjectList()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home {
|
||||
min-height: calc(100vh - 84px);
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue