| | |
| | | <template #content> |
| | | <div class="project-info"> |
| | | <div class="info-item"> |
| | | <!-- <div class="flex2 flex"> |
| | | <div class="label">项目编号</div> |
| | | <div class="value">{{ projectInfo.code || '-' }}</div> |
| | | </div> --> |
| | | <div class="flex2 flex"> |
| | | <div class="label">项目规模</div> |
| | | <div class="value">{{ `${projectInfo.scale}平方米` || '-' }}</div> |
| | | </div> |
| | | <div class="flex1 flex"> |
| | | <div class="label">工程类型</div> |
| | | <div class="value">{{ ['房建工程','市政工程','固定资产'][projectInfo.type] }}</div> |
| | |
| | | return { |
| | | mapView: null, |
| | | mapPromise: null, |
| | | currentMarker: null, // 保存当前的 marker 实例 |
| | | dateRange: [moment().subtract(5, 'months').startOf("month"), moment().endOf("month")], //默认近6个月 |
| | | markers: [], |
| | | projectId: '', |
| | |
| | | this.projectId = this.$route.query.projectId || '' |
| | | // 添加错误处理,确保登录信息获取失败不影响其他模块 |
| | | getLoginInfo({ id: this.projectId, type: 2 }).then(res => { |
| | | |
| | | |
| | | this.projectName = res.name |
| | | const permissions = res.permissionProject ? res.permissionProject.split(",") : [] |
| | | this.permissionProject = permissions |
| | |
| | | mounted() { |
| | | this.setMapload() |
| | | setTimeout(() => { |
| | | |
| | | this.initRiskChart() |
| | | }, 1000) |
| | | }, |
| | | activated() { |
| | | // 当从其他页面返回时,重新设置地图 marker |
| | | if (this.mapView && this.projectInfo.type !== undefined) { |
| | | this.updateMapMarker() |
| | | } |
| | | }, |
| | | beforeDestroy() { }, |
| | | methods: { |
| | |
| | | }); |
| | | |
| | | const contentType = response.headers.get('Content-Type') || ''; |
| | | |
| | | |
| | | |
| | | // 判断是否为视频 |
| | | if (contentType.startsWith('video/')) { |
| | |
| | | developmentCompanyInfo: developmentCompanyInfo, |
| | | supervisorCompanyInfo: supervisorCompanyInfo, |
| | | } |
| | | |
| | | |
| | | // 项目信息加载完成后,更新地图 marker |
| | | this.$nextTick(() => { |
| | | this.updateMapMarker() |
| | | }) |
| | | |
| | | }).catch(err => { |
| | | console.error('获取项目详情失败:', err) |
| | | // 设置默认值 |
| | |
| | | // 隐患数量 - 添加错误处理 |
| | | getDangerCount(this.projectId).then(res => { |
| | | this.dangerCount = res |
| | | |
| | | |
| | | }).catch(err => { |
| | | console.error('获取隐患数量失败:', err) |
| | | this.dangerCount = { |
| | |
| | | layers: [satellite], |
| | | }); |
| | | |
| | | // 在地图中心添加marker |
| | | const marker = new AMap.Marker({ |
| | | position: [104.065617, 30.65695], // 使用地图中心点坐标 |
| | | icon: new AMap.Icon({ |
| | | image:[require('../../assets/img/home/f4.png'),require('../../assets/img/home/s4.png'),require('../../assets/img/home/z4.png')][this.projectInfo.type] , |
| | | size: new AMap.Size(30, 30), |
| | | imageSize: new AMap.Size(30, 30) |
| | | }), |
| | | offset: new AMap.Pixel(-15, -15) // 设置偏移量,使图标中心对准坐标点 |
| | | }); |
| | | |
| | | // 将marker添加到地图 |
| | | this.mapView.add(marker); |
| | | |
| | | // 初始化时不立即添加 marker,等待项目信息加载完成后再添加 |
| | | // this.initCategoryMarkers(AMap); |
| | | }) |
| | | .catch((e) => { |
| | | console.error(e); //加载错误提示 |
| | | }); |
| | | }, |
| | | // 更新地图 marker |
| | | updateMapMarker() { |
| | | if (!this.mapView) return; |
| | | |
| | | // 清除旧的 marker |
| | | if (this.currentMarker) { |
| | | this.mapView.remove(this.currentMarker); |
| | | } |
| | | |
| | | // 根据项目类型选择图标 |
| | | const iconImages = [ |
| | | require('../../assets/img/home/f4.png'), |
| | | require('../../assets/img/home/s4.png'), |
| | | require('../../assets/img/home/z4.png') |
| | | ]; |
| | | |
| | | const iconImage = iconImages[this.projectInfo.type] || iconImages[0]; |
| | | |
| | | // 创建新的 marker |
| | | this.currentMarker = new AMap.Marker({ |
| | | position: [104.065617, 30.65695], |
| | | icon: new AMap.Icon({ |
| | | image: iconImage, |
| | | size: new AMap.Size(30, 30), |
| | | imageSize: new AMap.Size(30, 30) |
| | | }), |
| | | offset: new AMap.Pixel(-15, -15) |
| | | }); |
| | | |
| | | // 将 marker 添加到地图 |
| | | this.mapView.add(this.currentMarker); |
| | | }, |
| | | // 初始化 3D 环饼图(echarts-gl) |
| | | initPie3D() { |
| | |
| | | // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation,也就是实现每一个扇形。 |
| | | for (let i = 0; i < series.length; i++) { |
| | | endValue = startValue + series[i].pieData.value; |
| | | |
| | | |
| | | series[i].pieData.startRatio = startValue / sumValue; |
| | | series[i].pieData.endRatio = endValue / sumValue; |
| | | series[i].parametricEquation = this.getParametricEquation( |
| | |
| | | |
| | | try { |
| | | const res = await getProjectDangerousTrend(params); |
| | | |
| | | |
| | | |
| | | if (res && Array.isArray(res)) { |
| | | // 处理接口返回的数据 |
| | |
| | | // 将A、B、C转换为数值 3、2、1 |
| | | this.riskTrendData.seriesData = res.map(item => { |
| | | const value = this.levelToValue(item.level); |
| | | |
| | | |
| | | return value; |
| | | }); |
| | | |
| | |
| | | |
| | | .progress-num { |
| | | font-weight: 800; |
| | | font-size: 18px; |
| | | font-size: 14px; |
| | | color: #66ffff; |
| | | } |
| | | |
| | | .progress-unit { |
| | | font-weight: 800; |
| | | font-size: 12px; |
| | | font-size: 10px; |
| | | color: #66ffff; |
| | | margin-left: 2px; |
| | | } |