图片地图提交
This commit is contained in:
parent
98ba08bf63
commit
758fbc1c73
766
src/components/Map/ThreeMapImg/MapIndex.vue
Normal file
766
src/components/Map/ThreeMapImg/MapIndex.vue
Normal file
@ -0,0 +1,766 @@
|
||||
<!-- 迎检多项目导入展示 -->
|
||||
<template>
|
||||
<!-- 地图 -->
|
||||
<div class='map-div' id='map'></div>
|
||||
<!-- 内容 -->
|
||||
<div class="content-div">
|
||||
<!-- 左侧 -->
|
||||
<div class="left-div">
|
||||
<!-- 监管单位 -->
|
||||
<div class="jsgs-div">
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == ''}" @click="getPrjListData('')">全部公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0301'}" @click="getPrjListData('0301')">建设公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0310'}" @click="getPrjListData('0310')">滨海公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0302'}" @click="getPrjListData('0302')">城东公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0303'}" @click="getPrjListData('0303')">城南公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0304'}" @click="getPrjListData('0304')">城西公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0306'}" @click="getPrjListData('0306')">东丽公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0311'}" @click="getPrjListData('0311')">蓟州公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0328'}" @click="getPrjListData('0328')">武清公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0330'}" @click="getPrjListData('0330')">宝坻公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0329'}" @click="getPrjListData('0329')">宁河公司</div>
|
||||
<div class="prj-button" :class="{'xz-button':prjListInfo.code == '0327'}" @click="getPrjListData('0327')">静海公司</div>
|
||||
</div>
|
||||
<!-- 项目搜索 -->
|
||||
<div class="input-div">
|
||||
<input v-model="prjListInfo.name"/>
|
||||
<div class="input-button" @click="getPrjListData()">搜索</div>
|
||||
</div>
|
||||
<!-- 项目列表 -->
|
||||
<div class="list-div">
|
||||
<el-checkbox v-for="obj in prjListInfo.list" :label="obj.name" :key="obj.id" :value="obj.id" v-model="obj.val" @change="prjsDataHandle()"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图例 -->
|
||||
<div class="legend-div"></div>
|
||||
<!-- 右侧 -->
|
||||
<div class="right-div">
|
||||
<!-- 项目信息 -->
|
||||
<div class="xmxx-div">
|
||||
<div style="width: 1470px;top: 146px;left: 210px;">{{ prjInfoAndRisk.prjName }}</div>
|
||||
<div style="width: 490px;top: 207px;left: 210px;">{{ prjInfoAndRisk.constructionLineLength }} {{ prjInfoAndRisk.constructionLineLength ? '公里' : '' }}</div>
|
||||
<div style="width: 800px;top: 207px;left: 880px;">{{ prjInfoAndRisk.constrTransformerCapacity }} {{ prjInfoAndRisk.constructionLineLength ? '万千伏安' : '' }}</div>
|
||||
<div style="width: 490px;top: 266px;left: 210px;">{{ prjInfoAndRisk.ownerDept }}</div>
|
||||
<div style="width: 240px;top: 270px;left: 944px;">{{ prjInfoAndRisk.plannedCommencementDate }}</div>
|
||||
<div style="width: 240px;top: 270px;left: 1432px;">{{ prjInfoAndRisk.actualCommencementDate }}</div>
|
||||
<div style="width: 490px;top: 328px;left: 210px;">{{ prjInfoAndRisk.supervisionDept }}</div>
|
||||
<div style="width: 240px;top: 330px;left: 944px;">{{ prjInfoAndRisk.plannedCommissioningDate }}</div>
|
||||
<div style="width: 240px;top: 330px;left: 1432px;">{{ prjInfoAndRisk.actualCommissioningDate }}</div>
|
||||
<div style="width: 1470px;top: 386px;left: 210px;">{{ prjInfoAndRisk.constructionDept }}</div>
|
||||
</div>
|
||||
<!-- 进度完成情况 -->
|
||||
<div class="jdwcqk-div" ref="jdwcqkDom"></div>
|
||||
<!-- 前期手续办理 -->
|
||||
<div class="qqsxbl-div">
|
||||
<el-table :data="tableData" height="314px" style="width: 100%">
|
||||
<el-table-column prop="certificate" label="证件名称" width="900"/>
|
||||
<el-table-column prop="scheduledTime" label="计划完成时间" width="360"/>
|
||||
<el-table-column prop="actualTime" label="实际完成时间" width="360"/>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 当日风险及作业票 -->
|
||||
<div class="drfxjzyp-div">
|
||||
<div style="top: 50px;left: 200px;color: #FF1200;"><span class="iconfont" v-html="number2code(prjInfoAndRisk.level2)"/></div>
|
||||
<div style="top: 50px;left: 632px;color: #00C6FF;"><span class="iconfont" v-html="number2code(prjInfoAndRisk.level4)"/></div>
|
||||
<div style="top: 76px;left: 952px;color: #00FFCC;"><span class="iconfont" v-html="number2code(prjInfoAndRisk.ticketA+prjInfoAndRisk.ticketB)"/></div>
|
||||
<div style="top: 56px;left: 1432px;color: #FFFFFF;"><span class="iconfont" v-html="number2code(prjInfoAndRisk.ticketA)"/></div>
|
||||
<div style="top: 226px;left: 200px;color: #FFDE00;"><span class="iconfont" v-html="number2code(prjInfoAndRisk.level3)"/></div>
|
||||
<div style="top: 226px;left: 632px;color: #00FFCC;"><span class="iconfont" v-html="number2code(prjInfoAndRisk.level5)"/></div>
|
||||
<div style="top: 186px;left: 1432px;color: #FFFFFF;"><span class="iconfont" v-html="number2code(prjInfoAndRisk.ticketB)"/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {ref, reactive, onMounted, onBeforeUnmount} from 'vue'
|
||||
import {TA_MESH_TYPE, TIAN_JING} from './data/map'
|
||||
import {getPrjListSve, getPrjGpsListSve, getPrjBasicInfoSve, getCompletionRateSve, getProcedureHandlingSve} from '@/api/ThreeMap/threeMapZsService.js'
|
||||
import {randomLayerId, newMeshLayer, getAngle} from './js/map_util.js'
|
||||
import type_icon_green from './img/type_icon_green.png'
|
||||
import type_icon_red from './img/type_icon_red.png'
|
||||
|
||||
// 地图 距离计算插件 模型加载器 加载管理器 存储非掩膜图层{项目ID: [图层]} 塔高亮层
|
||||
let map, geometryUtil, loading_manager = new THREE.LoadingManager(), loader = new THREE.GLTFLoader(loading_manager), prjLayersMap = new Map(), taGaoLiangLayerId = []
|
||||
|
||||
// 页面加载后执行
|
||||
onMounted(() => initMap())
|
||||
|
||||
|
||||
// 初始化地图
|
||||
const initMap = async () => {
|
||||
let Key = import.meta.env.MODE === 'development' ? '408b7cf3f08a3cc6bc8740239d3f4f43' : import.meta.env.MODE === 'staging' ? '408b7cf3f08a3cc6bc8740239d3f4f43' : '16e40b6373753a25af016b00fe253719'
|
||||
let Secret = import.meta.env.MODE === 'development' ? 'b69d88dfe8c339b4a1e03798c4de909c' : import.meta.env.MODE === 'staging' ? 'b69d88dfe8c339b4a1e03798c4de909c' : 'ff8a70d5b536307598642fe7d9bd190c'
|
||||
await SGMap.tokenTask.login(Key, Secret)
|
||||
await SGMap.plugin(['SGMap.RoadNetLayer', 'SGMap.GeometryUtil'])
|
||||
geometryUtil = new SGMap.GeometryUtil()
|
||||
map = new SGMap.Map({container: 'map', zoom: 9.1, minZoom: 9.1, maxZoom: 19.8, style: 'aegis://styles/aegis/Satellite512', center: [117.39, 39.4]})
|
||||
map.on('style.load', function () {
|
||||
map.setMaxBounds(map.getBounds()) // 显示显示范围
|
||||
new SGMap.RoadNetLayer({map: map, style: "aegis://styles/aegis/Road-v2"}).render() // 路网
|
||||
map.addLayer({
|
||||
id: 'mask', type: 'line', paint: {'line-color': '#00E5EE', 'line-width': 6},
|
||||
source: {type: 'geojson', data: {type: 'FeatureCollection', features: [{type: 'Feature', geometry: {type: 'MultiPolygon', coordinates: [TIAN_JING]}}]}}
|
||||
}) // 行政区域高亮
|
||||
loading_manager.onLoad = () => getPrjListData()// 模型加载完成后调用获取内容层项目树数据
|
||||
for (let obj of TA_MESH_TYPE) {
|
||||
loader.load(obj.url, gltf => obj.mesh = gltf)
|
||||
}
|
||||
//加载图标
|
||||
map.loadImage(type_icon_green, (error, image) => map.addImage('type_icon_green', image))
|
||||
map.loadImage(type_icon_red, (error, image) => map.addImage('type_icon_red', image))
|
||||
addPulsingDot()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 项目数据处理器
|
||||
let xdIndex = null// 用于消抖
|
||||
const prjsDataHandle = async () => {
|
||||
if (xdIndex) {
|
||||
clearTimeout(xdIndex)
|
||||
}
|
||||
xdIndex = setTimeout(async () => {
|
||||
prjChange() // 显示右侧数据
|
||||
if (!prjListInfo.list.length) return false
|
||||
const prjids = prjListInfo.list.filter(item => item.val).map(item => item.id)
|
||||
const {data} = await getPrjGpsListSve({prjId: prjids.join(',')})
|
||||
prjLayerDelHandle(prjids)//prjids 未使用项目对比算法
|
||||
for (const prjObj of data) {
|
||||
if (prjObj.length == 0) continue
|
||||
if (!prjLayersMap.has(prjObj[0].id)) {
|
||||
prjDraw(prjObj)
|
||||
}
|
||||
}
|
||||
map.fitBounds(calcPrjCenter(data), {padding: 300})// 地图移动
|
||||
xdIndex = null
|
||||
}, 800)
|
||||
}
|
||||
|
||||
|
||||
// 项目绘制
|
||||
const prjDraw = prjObj => {
|
||||
gaoLiangTa()
|
||||
|
||||
const xlCircle = [], xlLine = [], xlNumber = []
|
||||
for (const taObj of prjObj) {
|
||||
if (taObj.longitude == null || taObj.latitude == null || isNaN(taObj.longitude) || isNaN(taObj.latitude)) {
|
||||
continue
|
||||
}
|
||||
const position = [parseFloat(taObj.longitude), parseFloat(taObj.latitude)]
|
||||
xlLine.push(position)
|
||||
xlNumber.push({type: 'Feature', geometry: {type: 'Point', coordinates: position}, properties: {taNumber: taObj.towerNo}})
|
||||
xlCircle.push({
|
||||
type: 'Feature', geometry: {type: 'Point', coordinates: position},
|
||||
properties: {icon: taObj.finished ? 'type_icon_green' : 'type_icon_red', color: taObj.finished ? 'green' : 'red'}
|
||||
})
|
||||
}
|
||||
if (xlLine.length == 0) {
|
||||
return false
|
||||
}
|
||||
// 2D 线路
|
||||
const xlLayerId = randomLayerId()
|
||||
map.addLayer({
|
||||
id: xlLayerId, type: 'line', metadata: {text: '自定义数据'}, paint: {'line-color': '#8430db', 'line-width': 12},
|
||||
source: {
|
||||
type: 'geojson',
|
||||
data: {type: 'FeatureCollection', features: [{type: 'Feature', geometry: {type: 'LineString', coordinates: xlLine}, properties: {text: '自定义数据'}}]},
|
||||
},
|
||||
})
|
||||
// 2D 塔标
|
||||
const taLayerId = randomLayerId()
|
||||
map.addLayer({
|
||||
id: taLayerId, type: 'symbol', maxzoom: 22, minzoom: 17, metadata: {text: '自定义数据'},
|
||||
source: {type: 'geojson', data: {type: 'FeatureCollection', features: xlCircle}},
|
||||
layout: {'icon-image': '{icon}', 'icon-size': 3, 'icon-ignore-placement': true, 'icon-allow-overlap': true, 'icon-anchor': 'center', 'icon-pitch-alignment': 'map'},
|
||||
})
|
||||
// 2D 小塔标
|
||||
const taMinLayerId = randomLayerId()
|
||||
map.addLayer({
|
||||
id: taMinLayerId, type: 'circle', maxzoom: 17, minzoom: 1, metadata: {text: '自定义数据'},
|
||||
source: {type: 'geojson', data: {type: 'FeatureCollection', features: xlCircle}},
|
||||
paint: {'circle-radius': 0, 'circle-stroke-color': ['get', 'color'], 'circle-stroke-width': 38, 'circle-pitch-alignment': 'map'}
|
||||
})
|
||||
// 2D 塔号
|
||||
const taNumLayerId = randomLayerId()
|
||||
map.addLayer({
|
||||
id: taNumLayerId, type: 'symbol', maxzoom: 22, minzoom: 17,
|
||||
source: {type: 'geojson', data: {type: 'FeatureCollection', features: xlNumber}},
|
||||
layout: {'text-ignore-placement': true, 'text-allow-overlap': true, 'text-field': '{taNumber}', 'text-size': 38, 'text-anchor': 'top'},
|
||||
paint: {'text-color': '#fff800', 'text-halo-width': 1.1, 'text-halo-color': '#FFFFFF'}
|
||||
})
|
||||
map.moveLayer(taNumLayerId)
|
||||
prjLayersMapAdd(prjObj[0].prjId, [taMinLayerId, xlLayerId, taLayerId, taNumLayerId])
|
||||
// 3D模型
|
||||
for (let i = 0; i < prjObj.length; i++) {
|
||||
const ta0 = prjObj[i], ta1 = prjObj[i + 1]
|
||||
const typeObj = TA_MESH_TYPE[ta0.tensionTowerFlag]
|
||||
const mesh = typeObj.mesh.scene.clone()
|
||||
mesh.scale.multiplyScalar(typeObj.scalar)
|
||||
mesh.position.set(0, 0, typeObj.height)
|
||||
const rotation = [...typeObj.rotation]
|
||||
const meshs = [mesh]
|
||||
// 绘制线路
|
||||
if (i < prjObj.length - 1) {
|
||||
const typeObj1 = TA_MESH_TYPE[ta1.tensionTowerFlag]
|
||||
const length = geometryUtil.distance([parseFloat(ta0.longitude), parseFloat(ta0.latitude)], [parseFloat(ta1.longitude), parseFloat(ta1.latitude)]) * 0.005946
|
||||
const geometryR = new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, typeObj.xHeight), new THREE.Vector3(0, length, typeObj1.xHeight)])
|
||||
const line = new THREE.Line(geometryR, new THREE.LineBasicMaterial(0xFFFF00))
|
||||
line.rotation.z = Math.PI / 180 * (180.022 - getAngle(parseFloat(ta0.longitude), parseFloat(ta0.latitude), parseFloat(ta1.longitude), parseFloat(ta1.latitude)))//Math.PI / 180 *206
|
||||
rotation[1] = rotation[1] + line.rotation.z // 根据线角度改变塔角度
|
||||
meshs.push(line)
|
||||
}
|
||||
mesh.rotation.set(...rotation)
|
||||
const meshLayerId = randomLayerId()
|
||||
map.addLayer(newMeshLayer(meshLayerId, [parseFloat(ta0.longitude), parseFloat(ta0.latitude)], meshs))
|
||||
prjLayersMapAdd(prjObj[0].prjId, [meshLayerId])
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 地图移动并放大塔
|
||||
const flyToTa = async (TaObj) => {
|
||||
if (TaObj.longitude != null && TaObj.latitude != null && !isNaN(TaObj.longitude) && !isNaN(TaObj.latitude)) {
|
||||
map.flyTo({center: [TaObj.longitude, TaObj.latitude], zoom: 19})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 塔高亮
|
||||
const gaoLiangTa = async (TaObj) => {
|
||||
// if (TaObj.longitude == null || TaObj.latitude == null || isNaN(TaObj.longitude) || isNaN(TaObj.latitude)) {
|
||||
// return false
|
||||
// }
|
||||
const gaoLiangTaLayerId = randomLayerId()
|
||||
map.addLayer({
|
||||
id: gaoLiangTaLayerId, type: 'symbol',
|
||||
source: {
|
||||
type: 'geojson', data: {
|
||||
type: 'FeatureCollection', features: [{type: 'Feature', geometry: {type: 'Point', coordinates: [117.39, 39.4]}}]
|
||||
}
|
||||
},
|
||||
layout: {'icon-image': 'pulsing-dot'}
|
||||
});
|
||||
taGaoLiangLayerId.push(gaoLiangTaLayerId)
|
||||
}
|
||||
|
||||
// 清除高亮图层
|
||||
const clearGaoLiangTa = () => {
|
||||
for (const layerId of taGaoLiangLayerId) {
|
||||
try {
|
||||
map.removeLayer(layerId)
|
||||
map.removeSource(layerId)
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
taGaoLiangLayerId = []
|
||||
}
|
||||
|
||||
// 项目Map对比处理本次未选择项目
|
||||
const prjLayerDelHandle = (prjNums) => {
|
||||
for (const [prjId, layerIds] of prjLayersMap) {
|
||||
if (!prjNums.includes(prjId)) {
|
||||
layerIds.forEach(layerId => {
|
||||
try {
|
||||
map.removeLayer(layerId)
|
||||
map.removeSource(layerId)
|
||||
} catch (e) {
|
||||
}
|
||||
})
|
||||
prjLayersMap.delete(prjId)
|
||||
}
|
||||
}
|
||||
clearGaoLiangTa()
|
||||
}
|
||||
|
||||
|
||||
// 清除地图组件
|
||||
onBeforeUnmount(() => map.remove())
|
||||
|
||||
/******************************************************************** 地图结束 ********************************************************************/
|
||||
import * as echarts from 'echarts'
|
||||
import {JDWCQK_OPTION} from './js/myEcharts.js'
|
||||
|
||||
// 页面加载后执行
|
||||
onMounted(() => initEcharts())
|
||||
|
||||
|
||||
// 项目列表相关[地图加载完成后执行]
|
||||
const prjListInfo = reactive({name: '', code: '', list: []})
|
||||
const getPrjListData = async (jgdwCode) => {
|
||||
if (typeof (jgdwCode) != 'undefined') prjListInfo.code = jgdwCode
|
||||
const {rows} = await getPrjListSve({prjName: prjListInfo.name, buildUnitCode: prjListInfo.code}, {pageNum: 1, pageSize: 999})
|
||||
prjListInfo.list = rows.map(item => ({...item, val: false}))
|
||||
await prjsDataHandle()
|
||||
}
|
||||
|
||||
|
||||
// 项目选择
|
||||
const prjChange = () => {
|
||||
const prjObj = prjListInfo.list.find(item => item.val)
|
||||
if (prjObj) {
|
||||
getPrjBasicInfo(prjObj.id)
|
||||
getEchartsData(prjObj.id)
|
||||
getProcedureHandling(prjObj.id)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 项目信息及风险
|
||||
const prjInfoAndRisk = reactive({
|
||||
prjName: '', constructionLineLength: '', constrTransformerCapacity: '', ownerDept: '', supervisionDept: '', constructionDept: '', plannedCommencementDate: '',
|
||||
actualCommencementDate: '', plannedCommissioningDate: '', actualCommissioningDate: '', level2: 0, level3: 0, level4: 0, level5: 0, ticketA: 0, ticketB: 0
|
||||
})
|
||||
const getPrjBasicInfo = async prjId => {
|
||||
const {data} = await getPrjBasicInfoSve({prjId})
|
||||
Object.assign(prjInfoAndRisk, data)
|
||||
}
|
||||
|
||||
|
||||
// 进度完成图表
|
||||
const jdwcqkDom = ref(null)
|
||||
let jdwcqkChart = null
|
||||
const initEcharts = () => {
|
||||
jdwcqkChart = echarts.init(jdwcqkDom.value)
|
||||
jdwcqkChart.setOption(JDWCQK_OPTION)
|
||||
}
|
||||
const getEchartsData = async prjId => {
|
||||
const {data} = await getCompletionRateSve({prjId})
|
||||
const jhData = new Array(12).fill(null), sjData = new Array(12).fill(null)
|
||||
for (const obj of data) {
|
||||
obj.completionType ? sjData[obj.month - 1] = obj.completionRate * 100 : jhData[obj.month - 1] = obj.completionRate * 100
|
||||
}
|
||||
jdwcqkChart.setOption({series: [{data: jhData}, {data: sjData}]})
|
||||
}
|
||||
|
||||
|
||||
// 前期手续
|
||||
const tableData = ref([])
|
||||
const getProcedureHandling = async prjId => {
|
||||
const {data} = await getProcedureHandlingSve({prjId})
|
||||
tableData.value = data
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 计算图层中心点
|
||||
* @param prjsData 项目信息数组
|
||||
* @returns {*[]} 顶点坐标
|
||||
*/
|
||||
const calcPrjCenter = prjsData => {
|
||||
let positions = [], result = []
|
||||
for (const prj of prjsData) {
|
||||
for (const dian of prj) {
|
||||
if (dian.longitude == null || dian.latitude == null || isNaN(dian.longitude) || isNaN(dian.latitude)) {
|
||||
continue
|
||||
}
|
||||
positions.push([dian.longitude, dian.latitude])
|
||||
}
|
||||
}
|
||||
if (positions.length != 0) {
|
||||
result = geometryUtil.bbox({'type': 'FeatureCollection', 'features': [{type: 'Feature', geometry: {type: 'Polygon', coordinates: [positions]}}]})
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 图层MAP添加数据
|
||||
* @param prjId 项目ID
|
||||
* @param layerId 图层ID
|
||||
*/
|
||||
const prjLayersMapAdd = (prjId, layerIds) => {
|
||||
if (prjLayersMap.has(prjId)) {
|
||||
prjLayersMap.get(prjId).push(...layerIds)
|
||||
} else {
|
||||
prjLayersMap.set(prjId, [...layerIds])
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 数字转换颜色字体符号
|
||||
* @param num 数字
|
||||
* @returns {string} 符号字符串
|
||||
*/
|
||||
const number2code = (num) => {
|
||||
if (num <= 0) return ''
|
||||
if (num > 999) return ''
|
||||
const numStr = num.toString()
|
||||
let result = ''
|
||||
for (let i = 0; i < numStr.length; i++) {
|
||||
result += `๠${numStr[i]};`
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
|
||||
const addPulsingDot = () => {
|
||||
var size = 200;
|
||||
|
||||
var pulsingDot = {
|
||||
width: size,
|
||||
height: size,
|
||||
data: new Uint8Array(size * size * 4),
|
||||
|
||||
onAdd: function () {
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = this.width;
|
||||
canvas.height = this.height;
|
||||
this.context = canvas.getContext('2d');
|
||||
},
|
||||
|
||||
render: function () {
|
||||
var duration = 1000;
|
||||
var t = (performance.now() % duration) / duration;
|
||||
|
||||
var radius = (size / 2) * 0.3;
|
||||
var outerRadius = (size / 2) * 0.7 * t + radius;
|
||||
var context = this.context;
|
||||
|
||||
// 画圆
|
||||
context.clearRect(0, 0, this.width, this.height);
|
||||
context.beginPath();
|
||||
context.arc(
|
||||
this.width / 2,
|
||||
this.height / 2,
|
||||
outerRadius,
|
||||
0,
|
||||
Math.PI * 2
|
||||
);
|
||||
context.fillStyle = "rgba(255, 200, 200," + (1 - t) + ")";
|
||||
context.fill();
|
||||
|
||||
// 画线
|
||||
context.beginPath();
|
||||
context.arc(
|
||||
this.width / 2,
|
||||
this.height / 2,
|
||||
radius,
|
||||
0,
|
||||
Math.PI * 2
|
||||
);
|
||||
context.fillStyle = "rgba(255, 100, 100, 1)";
|
||||
context.strokeStyle = "white";
|
||||
context.lineWidth = 2 + 4 * (1 - t);
|
||||
context.fill();
|
||||
context.stroke();
|
||||
|
||||
this.data = context.getImageData(
|
||||
0,
|
||||
0,
|
||||
this.width,
|
||||
this.height
|
||||
).data;
|
||||
map.triggerRepaint();
|
||||
|
||||
return true;
|
||||
}
|
||||
};
|
||||
map.addImage("pulsing-dot", pulsingDot, {pixelRatio: 2});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang='scss'>
|
||||
|
||||
/*引入字体*/
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('./iconfont/iconfont.ttf?t=1728884932916') format('truetype');
|
||||
}
|
||||
|
||||
/*字体样式*/
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.map-div, .content-div {
|
||||
position: absolute;
|
||||
width: 6912px;
|
||||
height: 2160px;
|
||||
/* 自定义滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px; /* 滚动条宽度 */
|
||||
height: 8px; /* 滚动条高度 */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1; /* 滚动条轨道背景 */
|
||||
border-radius: 4px; /* 圆角 */
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888; /* 滚动条滑块颜色 */
|
||||
border-radius: 4px; /* 圆角 */
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #555; /* 滑块悬停时的颜色 */
|
||||
}
|
||||
}
|
||||
|
||||
.map-div {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content-div {
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
background-image: url("./img/bgscreen.png");
|
||||
|
||||
/*左侧区域*/
|
||||
.left-div {
|
||||
width: 1411px;
|
||||
height: 1944px;
|
||||
position: absolute;
|
||||
top: 112px;
|
||||
left: 72px;
|
||||
background-image: url("img/left.png");
|
||||
pointer-events: auto;
|
||||
|
||||
/*建管单位*/
|
||||
.jsgs-div {
|
||||
width: 1291px;
|
||||
height: 183px;
|
||||
margin-left: 60px;
|
||||
margin-top: 57px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.prj-button {
|
||||
width: 170px;
|
||||
height: 65px;
|
||||
margin-right: 52px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
color: #FFFFFF;
|
||||
line-height: 64px;
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-child(6n + 6) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
/*建管选中*/
|
||||
.xz-button {
|
||||
background-image: url("img/prj_xz.png");
|
||||
}
|
||||
}
|
||||
|
||||
/*搜索框*/
|
||||
.input-div {
|
||||
width: 1182px;
|
||||
height: 82px;
|
||||
margin-left: 150px;
|
||||
margin-top: 38px;
|
||||
|
||||
& input {
|
||||
width: 1010px;
|
||||
height: 82px;
|
||||
font-size: 46px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/*搜索按钮*/
|
||||
.input-button {
|
||||
width: 156px;
|
||||
height: 72px;
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
border-radius: 36px;
|
||||
cursor: pointer;
|
||||
color: #FFFFFF;
|
||||
font-size: 36px;
|
||||
text-align: center;
|
||||
line-height: 72px;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*项目多选列表*/
|
||||
.list-div {
|
||||
width: 1280px;
|
||||
height: 1480px;
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
:deep(.el-checkbox) {
|
||||
width: 1276px;
|
||||
height: 82px;
|
||||
|
||||
/*列表每一条*/
|
||||
.el-checkbox__label {
|
||||
width: 1222px;
|
||||
height: 76px;
|
||||
font-size: 38px;
|
||||
color: #FFFFFF;
|
||||
margin-left: 18px;
|
||||
line-height: 76px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background-color: #0C3734;
|
||||
}
|
||||
|
||||
/*勾选方块*/
|
||||
.el-checkbox__inner {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
font-size: 34px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border-width: 3px;
|
||||
|
||||
/*勾选勾样式*/
|
||||
&::after {
|
||||
width: 12px;
|
||||
height: 28px;
|
||||
left: 10px;
|
||||
top: -2px;
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*图例*/
|
||||
.legend-div {
|
||||
width: 601px;
|
||||
height: 407px;
|
||||
position: absolute;
|
||||
top: 1605px;
|
||||
left: 4446px;
|
||||
background-image: url("./img/legeng.png");
|
||||
}
|
||||
|
||||
/*右侧区域*/
|
||||
.right-div {
|
||||
width: 1701px;
|
||||
height: 1946px;
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
left: 5144px;
|
||||
background-image: url("./img/right.png");
|
||||
pointer-events: auto;
|
||||
|
||||
& > div {
|
||||
width: 1630px;
|
||||
height: 316px;
|
||||
margin-top: 120px;
|
||||
margin-left: 36px;
|
||||
|
||||
&:nth-child(n+2) {
|
||||
margin-top: 178px;
|
||||
}
|
||||
|
||||
& > div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
/*项目信息*/
|
||||
.xmxx-div > div {
|
||||
position: absolute;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
color: #FFFFFF;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
/*前期手续办理*/
|
||||
.qqsxbl-div {
|
||||
/*表格背景*/
|
||||
:deep(.el-table) {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
/*文字样式*/
|
||||
th {
|
||||
color: #00FFF5;
|
||||
}
|
||||
|
||||
td {
|
||||
height: 83px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.cell {
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
/*隔行变色*/
|
||||
tr:nth-child(2n+1) td {
|
||||
background-color: rgba(1, 17, 27, .3);
|
||||
}
|
||||
|
||||
/*背景透明*/
|
||||
.el-table__cell, tr {
|
||||
border: 0px;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/*表格下方线条*/
|
||||
.el-table__inner-wrapper::before {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
/*暂无数据字体放大*/
|
||||
.el-table__empty-text {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*当日风险及作业票*/
|
||||
.drfxjzyp-div {
|
||||
position: relative;
|
||||
|
||||
& > div {
|
||||
width: 140px;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
font-size: 56px;
|
||||
|
||||
/*作业票*/
|
||||
&:nth-child(3) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*文字间距及影响右侧宽度*/
|
||||
& > span {
|
||||
letter-spacing: -22px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
31
src/components/Map/ThreeMapImg/data/map.js
Normal file
31
src/components/Map/ThreeMapImg/data/map.js
Normal file
File diff suppressed because one or more lines are too long
128
src/components/Map/ThreeMapImg/data/prj.js
Normal file
128
src/components/Map/ThreeMapImg/data/prj.js
Normal file
@ -0,0 +1,128 @@
|
||||
/**
|
||||
* id: 项目id
|
||||
* name: 项目名称
|
||||
* data: 项目单项数据
|
||||
* id: 单项id
|
||||
* name: 单项名称
|
||||
* type: 0变电,1线路
|
||||
* voltage: 电压
|
||||
* data: 模型数据
|
||||
* 变电: 中间坐标
|
||||
* 线路: {num: 塔编号, meshType: 模型类别, angle: 角度, jingDu: 进度, position: 坐标点}
|
||||
*/
|
||||
const PRJALLDATA = {
|
||||
id: '01', name: '项目一', data: [
|
||||
{id: '0001', name: '项目一单项一', type: 0, voltage: '110kV', data: [{meshType: 0, angle: 0, position: [116.96617312733409,39.28565115154862]}]},
|
||||
{id: '0004', name: '项目一单项二', type: 0, voltage: '110kV', data: [{meshType: 0, angle: 0, position: [116.9171146274472,39.19636448584982]}]},
|
||||
{
|
||||
id: '0002', name: '项目一单项三', type: 1, voltage: '110kV', data: [
|
||||
{num: '1', meshType: 2, angle: 0, jingDu: 2, position: [116.96617312733409,39.28465115154862]},
|
||||
{num: '2', meshType: 2, angle: 0, jingDu: 2, position: [116.96565299338033,39.28328129734453]},
|
||||
{num: '3', meshType: 2, angle: 0, jingDu: 2, position: [116.96579388214136,39.282292513842364]},
|
||||
{num: '4', meshType: 2, angle: 0, jingDu: 1, position: [116.96603669429459,39.28063388281218]},
|
||||
{num: '5', meshType: 2, angle: 0, jingDu: 1, position: [116.96628050539637,39.278978256996176]},
|
||||
{num: '6', meshType: 1, angle: 0, jingDu: 0, position: [116.96554518428105,39.27584371262848]},
|
||||
{num: '7', meshType: 1, angle: 90, jingDu: 0, position: [116.96525919823367,39.275883640951015]},
|
||||
{num: '8', meshType: 1, angle: 90, jingDu: 0, position: [116.96470518158223,39.275563581331475]},
|
||||
{num: '9', meshType: 1, angle: 0, jingDu: 0, position: [116.96442521849828,39.27581546934855]},
|
||||
{num: '10', meshType: 1, angle: 90, jingDu: 0, position: [116.9643580494941,39.27425276522513]},
|
||||
{num: '11', meshType: 2, angle: 90, jingDu: 0, position: [116.96051216710856,39.27413893961307]},
|
||||
{num: '12', meshType: 2, angle: 90, jingDu: 0, position: [116.95661528269619,39.27402412557669]},
|
||||
{num: '13', meshType: 2, angle: 90, jingDu: 0, position: [116.95236540477445,39.273900263148676]},
|
||||
{num: '14', meshType: 2, angle: 90, jingDu: 0, position: [116.94935048883333,39.27381266726728]},
|
||||
{num: '15', meshType: 1, angle: 60, jingDu: 0, position: [116.94599157999546,39.2737150188362]},
|
||||
{num: '16', meshType: 0, angle: 65, jingDu: 0, position: [116.94530474411589,39.275210625905544]},
|
||||
{num: '17', meshType: 0, angle: 65, jingDu: 0, position: [116.94312688299125,39.276034071100185]},
|
||||
{num: '18', meshType: 1, angle: 90, jingDu: 0, position: [116.9416957772779,39.27449006098221]},
|
||||
{num: '19', meshType: 2, angle: 90, jingDu: 0, position: [116.93879676742206,39.27351468226079]},
|
||||
{num: '20', meshType: 2, angle: 90, jingDu: 0, position: [116.93704281084004,39.273460368313735]},
|
||||
{num: '21', meshType: 2, angle: 90, jingDu: 0, position: [116.93559084624549,39.27341511166889]},
|
||||
{num: '22', meshType: 2, angle: 90, jingDu: 0, position: [116.93268388406489,39.272964663446274]},
|
||||
{num: '23', meshType: 2, angle: 90, jingDu: 0, position: [116.928817977559,39.27287900222]},
|
||||
{num: '24', meshType: 2, angle: 90, jingDu: 0, position: [116.92532605926375,39.27280342214587]},
|
||||
{num: '25', meshType: 2, angle: 90, jingDu: 0, position: [116.92074416222299,39.27270268602887]},
|
||||
{num: '26', meshType: 2, angle: 90, jingDu: 0, position: [116.91830021535935,39.27265030456099]},
|
||||
{num: '27', meshType: 2, angle: 90, jingDu: 0, position: [116.91473531829428,39.27293571283062]},
|
||||
{num: '28', meshType: 2, angle: 90, jingDu: 0, position: [116.91139641092582,39.2732051761668]},
|
||||
{num: '29', meshType: 2, angle: 90, jingDu: 0, position: [116.91020445485948,39.27346096797932]},
|
||||
{num: '30', meshType: 2, angle: 90, jingDu: 0, position: [116.90818952765211,39.27389562187731]},
|
||||
{num: '31', meshType: 2, angle: 90, jingDu: 0, position: [116.90762654758494,39.274016526610794]},
|
||||
{num: '32', meshType: 2, angle: 90, jingDu: 0, position: [116.90396168416179,39.27495690240561]},
|
||||
{num: '33', meshType: 2, angle: 90, jingDu: 0, position: [116.90106379243261,39.27578141815839]},
|
||||
{num: '34', meshType: 2, angle: 90, jingDu: 0, position: [116.89833990197332,39.27674095784954]},
|
||||
{num: '35', meshType: 2, angle: 90, jingDu: 0, position: [116.89520002228738,39.27784844742992]},
|
||||
{num: '36', meshType: 2, angle: 90, jingDu: 0, position: [116.89428796806817,39.2767854505093]},
|
||||
{num: '37', meshType: 2, angle: 90, jingDu: 0, position: [116.89204598840499,39.276576203247046]},
|
||||
{num: '38', meshType: 2, angle: 90, jingDu: 0, position: [116.88951401056406,39.27633793045069]},
|
||||
{num: '39', meshType: 2, angle: 90, jingDu: 0, position: [116.88675303405297,39.27608064021684]},
|
||||
{num: '40', meshType: 2, angle: 90, jingDu: 0, position: [116.88478905022295,39.275897438510434]},
|
||||
{num: '41', meshType: 2, angle: 0, jingDu: 0, position: [116.8848909550297,39.27430060773251]},
|
||||
{num: '42', meshType: 2, angle: 0, jingDu: 0, position: [116.88651675486763,39.27136909578987]},
|
||||
{num: '43', meshType: 2, angle: 0, jingDu: 0, position: [116.88563153798448,39.267538400215585]},
|
||||
{num: '44', meshType: 2, angle: 0, jingDu: 0, position: [116.8848863559839,39.264319664707436]},
|
||||
{num: '45', meshType: 2, angle: 0, jingDu: 0, position: [116.8840701565928,39.260790964119025]},
|
||||
{num: '46', meshType: 2, angle: 0, jingDu: 0, position: [116.88357603607969,39.258657149875766]},
|
||||
{num: '47', meshType: 2, angle: 0, jingDu: 0, position: [116.88509279870117,39.255447736403475]},
|
||||
{num: '48', meshType: 2, angle: 0, jingDu: 0, position: [116.88657155912028,39.25232233428874]},
|
||||
{num: '49', meshType: 2, angle: 0, jingDu: 0, position: [116.88813229702602,39.249021994357065]},
|
||||
{num: '50', meshType: 2, angle: 0, jingDu: 0, position: [116.88957204660052,39.24597463033985]},
|
||||
{num: '51', meshType: 2, angle: 0, jingDu: 0, position: [116.89111276965458,39.242716339379946]},
|
||||
{num: '52', meshType: 2, angle: 0, jingDu: 0, position: [116.89259449418432,39.23958204997065]},
|
||||
{num: '53', meshType: 2, angle: 0, jingDu: 0, position: [116.89411420227042,39.2363678083321]},
|
||||
{num: '54', meshType: 2, angle: 0, jingDu: 0, position: [116.89546093541158,39.233518506001474]},
|
||||
{num: '55', meshType: 2, angle: 0, jingDu: 0, position: [116.89698262481245,39.230302323039]},
|
||||
{num: '56', meshType: 2, angle: 0, jingDu: 0, position: [116.89798741400055,39.228175880296064]},
|
||||
{num: '57', meshType: 2, angle: 0, jingDu: 0, position: [116.8989931982963,39.22604445259589]},
|
||||
{num: '58', meshType: 2, angle: 0, jingDu: 0, position: [116.90032390610239,39.22322623123997]},
|
||||
{num: '59', meshType: 2, angle: 0, jingDu: 0, position: [116.90169559615612,39.22031706100357]},
|
||||
{num: '60', meshType: 2, angle: 90, jingDu: 0, position: [116.9030492820019,39.217448905981165]},
|
||||
{num: '61', meshType: 2, angle: 45, jingDu: 0, position: [116.90455192309912,39.21426387569807]},
|
||||
{num: '62', meshType: 2, angle: 45, jingDu: 0, position: [116.90670467576219,39.21286264208027]},
|
||||
{num: '63', meshType: 2, angle: 45, jingDu: 0, position: [116.9094833468355,39.211052660591285]},
|
||||
{num: '64', meshType: 2, angle: 0, jingDu: 0, position: [116.91137211711221,39.20982337161457]},
|
||||
{num: '65', meshType: 2, angle: 0, jingDu: 0, position: [116.91142895702228,39.20816476071271]},
|
||||
{num: '66', meshType: 2, angle: 0, jingDu: 0, position: [116.91152966818002,39.20520246751227]},
|
||||
{num: '67', meshType: 2, angle: 0, jingDu: 0, position: [116.91162140006327,39.20248712894189]},
|
||||
{num: '68', meshType: 2, angle: 45, jingDu: 0, position: [116.9116842144536,39.20062658976945]},
|
||||
{num: '69', meshType: 2, angle: 45, jingDu: 0, position: [116.91490886942996,39.199401704384314]},
|
||||
{num: '70', meshType: 2, angle: 45, jingDu: 0, position: [116.9171146274472,39.19856448584982]}]
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const PRJBDDATA = {
|
||||
id: '02', name: '项目二', data: [
|
||||
{
|
||||
id: '0001', name: '项目二单项一', type: 0, voltage: '110kV',
|
||||
data: [{meshType: 0, angle: 0, position: [117.35376238332242, 39.14392632973522]}],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const PRJXLDATA = {
|
||||
id: '03', name: '项目三', data: [
|
||||
{
|
||||
id: '0002', name: '项目三单项一', type: 1, voltage: '110kV', data: [
|
||||
{num: '1', meshType: 0, angle: 0, position: [117.35376238332242, 39.14392632973522]},
|
||||
{num: '2', meshType: 0, angle: 0, position: [117.35532677241969, 39.14143123016336]},
|
||||
{num: '3', meshType: 0, angle: 30, position: [117.35668341966146, 39.13919402789219]},
|
||||
{num: '4', meshType: 0, angle: 80, position: [117.35822575248443, 39.136684174218004]},
|
||||
{num: '5', meshType: 0, angle: 80, position: [117.36093737466899, 39.13772042149586]},
|
||||
{num: '6', meshType: 0, angle: 160, position: [117.36403352685568, 39.138885283819945]},
|
||||
{num: '7', meshType: 0, angle: 170, position: [117.3625939618451, 39.141263636891296]},
|
||||
{num: '8', meshType: 0, angle: 160, position: [117.3611750231372, 39.14365453185653]},
|
||||
{num: '9', meshType: 0, angle: 230, position: [117.35957256253056, 39.14596696560102]},
|
||||
{num: '10', meshType: 0, angle: 250, position: [117.35779957290708, 39.14580327830819]},
|
||||
{num: '11', meshType: 0, angle: 280, position: [117.35606811449026, 39.14828607592088]},
|
||||
{num: '12', meshType: 0, angle: 320, position: [117.35438769447052, 39.14802915894367]},
|
||||
{num: '13', meshType: 0, angle: 350, position: [117.35503118513049, 39.146931305887705]},
|
||||
{num: '14', meshType: 0, angle: 230, position: [117.3529447330198, 39.14614129160381]},
|
||||
{num: '15', meshType: 0, angle: 230, position: [117.35205649844403, 39.14777614691545]},
|
||||
{num: '16', meshType: 0, angle: 160, position: [117.35126445288233, 39.14851801520288]},
|
||||
{num: '17', meshType: 0, angle: 100, position: [117.35339020032728, 39.1492956956871]}],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
export {PRJALLDATA, PRJBDDATA, PRJXLDATA}
|
||||
BIN
src/components/Map/ThreeMapImg/iconfont/iconfont.ttf
Normal file
BIN
src/components/Map/ThreeMapImg/iconfont/iconfont.ttf
Normal file
Binary file not shown.
BIN
src/components/Map/ThreeMapImg/img/bgscreen.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/bgscreen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/components/Map/ThreeMapImg/img/button_icon.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/button_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/components/Map/ThreeMapImg/img/feng_xian.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/feng_xian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
src/components/Map/ThreeMapImg/img/kua_yue.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/kua_yue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/components/Map/ThreeMapImg/img/left.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
src/components/Map/ThreeMapImg/img/legeng.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/legeng.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
src/components/Map/ThreeMapImg/img/prj_xz.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/prj_xz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
BIN
src/components/Map/ThreeMapImg/img/right.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 822 KiB |
BIN
src/components/Map/ThreeMapImg/img/tab_bian_dian.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/tab_bian_dian.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/components/Map/ThreeMapImg/img/tab_xian_lu.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/tab_xian_lu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/components/Map/ThreeMapImg/img/tu_li.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/tu_li.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
src/components/Map/ThreeMapImg/img/type_icon_green.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/type_icon_green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/components/Map/ThreeMapImg/img/type_icon_red.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/type_icon_red.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
src/components/Map/ThreeMapImg/img/win-jian-tou.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/win-jian-tou.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 666 B |
BIN
src/components/Map/ThreeMapImg/img/yu_jing.png
Normal file
BIN
src/components/Map/ThreeMapImg/img/yu_jing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
74
src/components/Map/ThreeMapImg/js/map_util.js
Normal file
74
src/components/Map/ThreeMapImg/js/map_util.js
Normal file
@ -0,0 +1,74 @@
|
||||
|
||||
|
||||
/**
|
||||
* 创建3D图层
|
||||
* @param layerId 图层ID
|
||||
* @param position 模型中心点
|
||||
* @param mesh 模型数组
|
||||
* @returns {{renderingMode: string, id, type: string, onAdd: *, render: *}} 3D图层对象
|
||||
*/
|
||||
const newMeshLayer = (layerId, position, meshs) => {
|
||||
return {
|
||||
id: layerId, type: 'custom', renderingMode: '3d',
|
||||
onAdd: function (map, gl) {
|
||||
this.camera = new THREE.Camera()
|
||||
this.scene = new THREE.Scene()
|
||||
this.scene.add(new THREE.AmbientLight( 0xFFFFFF,0.9))
|
||||
this.position = position
|
||||
this.scene.add(...meshs)
|
||||
this.renderer = new THREE.WebGLRenderer({ canvas: map.getCanvas(), context: gl })
|
||||
this.renderer.autoClear = false
|
||||
},
|
||||
render: function (gl, matrix) {
|
||||
let m = new THREE.Matrix4().fromArray(matrix)
|
||||
const modelTransform = SGMap.MercatorCoordinate.fromLngLat(this.position, 0)
|
||||
const l = new THREE.Matrix4().makeTranslation(modelTransform.x, modelTransform.y, modelTransform.z).scale(new THREE.Vector3(5.41843220338983e-6, -5.41843220338983e-6, 5.41843220338983e-6))
|
||||
this.camera.projectionMatrix.elements = matrix
|
||||
this.camera.projectionMatrix = m.multiply(l)
|
||||
this.renderer.state.reset()
|
||||
this.renderer.render(this.scene, this.camera)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取唯一图层Id
|
||||
* @returns {string}
|
||||
*/
|
||||
const randomLayerId = () => Date.now().toString(36) + Math.random().toString(36).substr(2, 9)
|
||||
|
||||
/**
|
||||
* 获取项目所有覆盖我坐标点,用于计算地图显示范围
|
||||
* @param data 单项需要用[]数字包上
|
||||
* @returns [[lng, lat], [lng, lat]]
|
||||
*/
|
||||
const calcPrjBounds = data => {
|
||||
const positions = []
|
||||
for (const sge of data) {
|
||||
for (const ptnObj of sge.data) {
|
||||
positions.push(ptnObj.position)
|
||||
}
|
||||
}
|
||||
return positions
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 计算两塔连线与北方夹角
|
||||
* @param aLng 第一个点经度
|
||||
* @param aLat 第一个点维度
|
||||
* @param bLng 第二个点经度
|
||||
* @param bLat 第二个点维度
|
||||
* @returns {number} 角度
|
||||
*/
|
||||
const getAngle = (aLng, aLat, bLng, bLat) => {
|
||||
const RADIUS = 6378137//地球半径
|
||||
const bx = (aLng * Math.PI / 180 - bLng * Math.PI / 180) * (RADIUS * Math.cos(bLat * Math.PI / 180))
|
||||
const by = (aLat * Math.PI / 180 - bLat * Math.PI / 180) * RADIUS
|
||||
return Math.atan2(bx, by) * 180.0 / Math.PI
|
||||
}
|
||||
|
||||
|
||||
// 导出
|
||||
export {randomLayerId, newMeshLayer, calcPrjBounds, getAngle }
|
||||
20
src/components/Map/ThreeMapImg/js/myEcharts.js
Normal file
20
src/components/Map/ThreeMapImg/js/myEcharts.js
Normal file
@ -0,0 +1,20 @@
|
||||
// 进度完成情况图表
|
||||
export const JDWCQK_OPTION = {
|
||||
title: {text: '单位：%', left: '2%', textStyle: {color: '#fff', fontSize: '22', fontWeight: 'normal'}},
|
||||
legend: {
|
||||
right: '2%', textStyle: {fontWeight: 500, fontSize: '26', padding: 16, color: '#FFFFFF'},
|
||||
data: [{"name": "计划", "textStyle": {color: 'white',}, itemStyle: {color: '#00FF0C '}},
|
||||
{"name": "实际", "textStyle": {color: 'white',}, itemStyle: {color: '#FFB400'}}]
|
||||
},
|
||||
grid: {left: '5%', right: '2%', bottom: '10%'},
|
||||
xAxis: {
|
||||
type: 'category', boundaryGap: false,
|
||||
axisLabel: {inside: false, textStyle: {fontSize: 26, padding: 1, color: '#FFFFFF'}},
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
},
|
||||
yAxis: {name: '%', type: 'value', axisLabel: {show: true, inside: false, textStyle: {fontSize: 26, padding: 0, color: '#FFFFFF'}}},
|
||||
series: [
|
||||
{name: '计划', type: 'line', data: [null, null, null, null, null, null, null, null, null, null, null, null], "itemStyle": {"normal": {"color": "#00FF0C "}}},
|
||||
{name: '实际', type: 'line', data: [null, null, null, null, null, null, null, null, null, null, null, null], "itemStyle": {"normal": {"color": "#FFB400"}}}
|
||||
]
|
||||
}
|
||||
@ -103,34 +103,34 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧-->
|
||||
<!-- <div class="rightbc" style="">-->
|
||||
<!-- <div class="bt">-->
|
||||
<!-- <div class="btitem" @click="changeStatus(0)" :class="currentStatus==0?'btitemActive':''">全部</div>-->
|
||||
<!-- <div class="btitem" @click="changeStatus(1)" :class="currentStatus==1?'btitemActive':''">已完成</div>-->
|
||||
<!-- <div class="btitem" @click="changeStatus(2)" :class="currentStatus==2?'btitemActive':''">未完成</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tableArea">-->
|
||||
<!-- <div class="headColumn">-->
|
||||
<!-- <div class="column">塔号</div>-->
|
||||
<!-- <div class="column">计划完成时间</div>-->
|
||||
<!-- <div class="column">实际完成时间</div>-->
|
||||
<!-- <div class="column">是否已完成</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="contentArea">-->
|
||||
<!-- <div class="contentItem" v-for="(item,index) in tableDataInfo" :class="index%2!=0?'singleOrDouble':''">-->
|
||||
<!-- <div>{{item.a}}</div>-->
|
||||
<!-- <div>{{item.b}}</div>-->
|
||||
<!-- <div>{{item.c}}</div>-->
|
||||
<!-- <div>{{item.d}}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="rightbc" style="">-->
|
||||
<!-- <div class="bt">-->
|
||||
<!-- <div class="btitem" @click="changeStatus(0)" :class="currentStatus==0?'btitemActive':''">全部</div>-->
|
||||
<!-- <div class="btitem" @click="changeStatus(1)" :class="currentStatus==1?'btitemActive':''">已完成</div>-->
|
||||
<!-- <div class="btitem" @click="changeStatus(2)" :class="currentStatus==2?'btitemActive':''">未完成</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="tableArea">-->
|
||||
<!-- <div class="headColumn">-->
|
||||
<!-- <div class="column">塔号</div>-->
|
||||
<!-- <div class="column">计划完成时间</div>-->
|
||||
<!-- <div class="column">实际完成时间</div>-->
|
||||
<!-- <div class="column">是否已完成</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="contentArea">-->
|
||||
<!-- <div class="contentItem" v-for="(item,index) in tableDataInfo" :class="index%2!=0?'singleOrDouble':''">-->
|
||||
<!-- <div>{{ item.a }}</div>-->
|
||||
<!-- <div>{{ item.b }}</div>-->
|
||||
<!-- <div>{{ item.c }}</div>-->
|
||||
<!-- <div>{{ item.d }}</div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- 中间-->
|
||||
<div class="centerArea">
|
||||
<div class="close">X</div>
|
||||
<div class="imgArea"></div>
|
||||
</div>
|
||||
<!-- <div class="centerArea">-->
|
||||
<!-- <div class="close">X</div>-->
|
||||
<!-- <div class="imgArea"></div>-->
|
||||
<!-- </div>-->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -141,8 +141,8 @@ import {randomLayerId, newMeshLayer, getAngle} from './js/map_util.js'
|
||||
import type_icon_green from './img/type_icon_green.png'
|
||||
import type_icon_red from './img/type_icon_red.png'
|
||||
|
||||
// 地图 距离计算插件 模型加载器 加载管理器 存储非掩膜图层{项目ID: [图层]}
|
||||
let map, geometryUtil, loading_manager = new THREE.LoadingManager(), loader = new THREE.GLTFLoader(loading_manager), prjLayersMap = new Map()
|
||||
// 地图 距离计算插件 模型加载器 加载管理器 存储非掩膜图层{项目ID: [图层]} 塔高亮层
|
||||
let map, geometryUtil, loading_manager = new THREE.LoadingManager(), loader = new THREE.GLTFLoader(loading_manager), prjLayersMap = new Map(), taGaoLiangLayerId = []
|
||||
|
||||
// 页面加载后执行
|
||||
onMounted(() => initMap())
|
||||
@ -185,14 +185,23 @@ const prjsDataHandle = async () => {
|
||||
if (!prjListInfo.list.length) return false
|
||||
const prjids = prjListInfo.list.filter(item => item.val).map(item => item.id)
|
||||
const {data} = await getPrjGpsListSve({prjId: prjids.join(',')})
|
||||
prjLayerDelHandle(prjids)//prjids 未使用项目对比算法
|
||||
prjLayerDelHandle(prjids)//用项目对比算法
|
||||
const positions = []
|
||||
for (const prjObj of data) {
|
||||
if (prjObj.length == 0) continue
|
||||
if (!prjLayersMap.has(prjObj[0].id)) {
|
||||
prjDraw(prjObj)
|
||||
}
|
||||
for (const dian of prjObj) { // 收集塔坐标用于地图移动
|
||||
if (dian.longitude == null || dian.latitude == null || isNaN(dian.longitude) || isNaN(dian.latitude)) {
|
||||
continue
|
||||
}
|
||||
positions.push([dian.longitude, dian.latitude])
|
||||
}
|
||||
}
|
||||
if (positions.length != 0) { // 地图移动
|
||||
map.fitBounds(geometryUtil.bbox({'type': 'FeatureCollection', 'features': [{type: 'Feature', geometry: {type: 'Polygon', coordinates: [positions]}}]}), {padding: 300})
|
||||
}
|
||||
calcPrjCenter(data) // 地图移动
|
||||
xdIndex = null
|
||||
}, 800)
|
||||
|
||||
@ -230,6 +239,13 @@ const prjDraw = prjObj => {
|
||||
source: {type: 'geojson', data: {type: 'FeatureCollection', features: xlCircle}},
|
||||
layout: {'icon-image': '{icon}', 'icon-size': 3, 'icon-ignore-placement': true, 'icon-allow-overlap': true, 'icon-anchor': 'center', 'icon-pitch-alignment': 'map'}
|
||||
})
|
||||
// 2D 小塔标
|
||||
const taMinLayerId = randomLayerId()
|
||||
map.addLayer({
|
||||
id: taMinLayerId, type: 'circle', maxzoom: 17, minzoom: 1, metadata: {text: '自定义数据'},
|
||||
source: {type: 'geojson', data: {type: 'FeatureCollection', features: xlCircle}},
|
||||
paint: {'circle-radius': 0, 'circle-stroke-color': ['get', 'color'], 'circle-stroke-width': 38, 'circle-pitch-alignment': 'map'}
|
||||
})
|
||||
// 2D 塔号
|
||||
const taNumLayerId = randomLayerId()
|
||||
map.addLayer({
|
||||
@ -239,7 +255,7 @@ const prjDraw = prjObj => {
|
||||
layout: {'text-ignore-placement': true, 'text-allow-overlap': true, 'text-field': '{taNumber}', 'text-size': 38, 'text-anchor': 'top'}
|
||||
})
|
||||
map.moveLayer(taNumLayerId)
|
||||
prjLayersMapAdd(prjObj[0].prjId, [xlLayerId, taLayerId, taNumLayerId])
|
||||
prjLayersMapAdd(prjObj[0].prjId, [taMinLayerId, xlLayerId, taLayerId, taNumLayerId])
|
||||
// 3D模型
|
||||
for (let i = 0; i < prjObj.length; i++) {
|
||||
const ta0 = prjObj[i], ta1 = prjObj[i + 1]
|
||||
@ -266,6 +282,42 @@ const prjDraw = prjObj => {
|
||||
}
|
||||
}
|
||||
|
||||
// 地图移动并放大塔
|
||||
const flyToTa = async (TaObj) => {
|
||||
if (TaObj.longitude != null && TaObj.latitude != null && !isNaN(TaObj.longitude) && !isNaN(TaObj.latitude)) {
|
||||
map.flyTo({center: [TaObj.longitude, TaObj.latitude], zoom: 19})
|
||||
}
|
||||
}
|
||||
|
||||
// 塔高亮
|
||||
const gaoLiangTa = async (TaObj) => {
|
||||
// if (TaObj.longitude == null || TaObj.latitude == null || isNaN(TaObj.longitude) || isNaN(TaObj.latitude)) {
|
||||
// return false
|
||||
// }
|
||||
const gaoLiangTaLayerId = randomLayerId()
|
||||
map.addLayer({
|
||||
id: gaoLiangTaLayerId, type: 'symbol',
|
||||
source: {
|
||||
type: 'geojson', data: {
|
||||
type: 'FeatureCollection', features: [{type: 'Feature', geometry: {type: 'Point', coordinates: [117.39, 39.4]}}]
|
||||
}
|
||||
},
|
||||
layout: {'icon-image': 'pulsing-dot'}
|
||||
});
|
||||
taGaoLiangLayerId.push(gaoLiangTaLayerId)
|
||||
}
|
||||
|
||||
// 清除高亮图层
|
||||
const clearGaoLiangTa = () => {
|
||||
for (const layerId of taGaoLiangLayerId) {
|
||||
try {
|
||||
map.removeLayer(layerId)
|
||||
map.removeSource(layerId)
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
taGaoLiangLayerId = []
|
||||
}
|
||||
|
||||
// 项目Map对比处理本次未选择项目
|
||||
const prjLayerDelHandle = (prjNums) => {
|
||||
@ -319,91 +371,7 @@ let currentStatus = ref('0')
|
||||
const changeStatus = (pay) => {
|
||||
currentStatus.value = pay
|
||||
}
|
||||
let tableDataInfo = ref([
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
{a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'},
|
||||
])
|
||||
let tableDataInfo = ref([ {a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'}, {a: '001', b: '2022-02-5', c: '2022-02-5', d: '已完成'}])
|
||||
// 项目列表相关[地图加载完成后执行]
|
||||
|
||||
const prjListInfo = reactive({name: '', code: '', list: [], children: []})
|
||||
@ -416,76 +384,22 @@ const setcheckList = () => {
|
||||
}
|
||||
let checkList = ref([])
|
||||
const prjListInfo1 = reactive(
|
||||
[
|
||||
[{
|
||||
name: '项目1', code: '001', list: {
|
||||
parentId: '001', children: [{name: '塔号1', code: '001-002', isfinished: true, userData: {longitude: '111.123', latitude: '39.1234'}},
|
||||
{name: '塔号2', code: '001-002', isfinished: true, userData: {longitude: '111.123', latitude: '39.1234'}}]
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '项目1', code: '001',
|
||||
list: {
|
||||
parentId: '001',
|
||||
children: [
|
||||
{
|
||||
name: '项目1-001',
|
||||
code: '001-001',
|
||||
isfinished: true
|
||||
},
|
||||
{
|
||||
name: '项目1-002',
|
||||
code: '001-002',
|
||||
isfinished: true
|
||||
},
|
||||
{
|
||||
name: '项目1-003',
|
||||
code: '001-004',
|
||||
isfinished: false
|
||||
},
|
||||
]
|
||||
name: '项目2', code: '002', list: {
|
||||
parentId: '002', children: [{name: '项目1-001', code: '001-001', isfinished: true}, {name: '项目1-002', code: '001-002', isfinished: true}]
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '项目3', code: '003',
|
||||
list: {
|
||||
parentId: '003',
|
||||
children: [
|
||||
{
|
||||
name: '项目3-001',
|
||||
code: '003-001',
|
||||
isfinished: true
|
||||
},
|
||||
{
|
||||
name: '项目3-002',
|
||||
code: '003-002',
|
||||
isfinished: true
|
||||
},
|
||||
{
|
||||
name: '项目3-003',
|
||||
code: '003-004',
|
||||
isfinished: false
|
||||
},
|
||||
]
|
||||
name: '项目1', code: '003', list: {
|
||||
parentId: '003', children: [{name: '项目1-001', code: '001-001', isfinished: true}, {name: '项目1-002', code: '001-002', isfinished: true}]
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '项目2', code: '002',
|
||||
list: {
|
||||
parentId: '002',
|
||||
children: [
|
||||
{
|
||||
name: '项目2-001',
|
||||
code: '002-001',
|
||||
isfinished: true
|
||||
},
|
||||
{
|
||||
name: '项目2-002',
|
||||
code: '002-002',
|
||||
isfinished: true
|
||||
},
|
||||
{
|
||||
name: '项目2-003',
|
||||
code: '002-004',
|
||||
isfinished: false
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
}
|
||||
]
|
||||
)
|
||||
|
||||
@ -514,9 +428,8 @@ const prjChange = () => {
|
||||
|
||||
// 项目信息及风险
|
||||
const prjInfoAndRisk = reactive({
|
||||
prjName: '', constructionLineLength: '', constrTransformerCapacity: '', ownerDept: '', supervisionDept: '', constructionDept: '',
|
||||
plannedCommencementDate: '', actualCommencementDate: '', plannedCommissioningDate: '', actualCommissioningDate: '',
|
||||
level2: 0, level3: 0, level4: 0, level5: 0, ticketA: 0, ticketB: 0
|
||||
prjName: '', constructionLineLength: '', constrTransformerCapacity: '', ownerDept: '', supervisionDept: '', constructionDept: '', plannedCommencementDate: '',
|
||||
actualCommencementDate: '', plannedCommissioningDate: '', actualCommissioningDate: '', level2: 0, level3: 0, level4: 0, level5: 0, ticketA: 0, ticketB: 0
|
||||
})
|
||||
const getPrjBasicInfo = async prjId => {
|
||||
const {data} = await getPrjBasicInfoSve({prjId})
|
||||
@ -551,8 +464,8 @@ const getProcedureHandling = async prjId => {
|
||||
|
||||
/**
|
||||
* 图层MAP添加数据
|
||||
* @param prjId
|
||||
* @param layerId
|
||||
* @param prjId 项目ID
|
||||
* @param layerId 图层ID
|
||||
*/
|
||||
const prjLayersMapAdd = (prjId, layerIds) => {
|
||||
if (prjLayersMap.has(prjId)) {
|
||||
@ -744,7 +657,7 @@ const number2code = (num) => {
|
||||
/*项目多选列表*/
|
||||
.list-div {
|
||||
width: 1280px;
|
||||
height: 1480px;
|
||||
height: 1400px;
|
||||
margin-top: 50px;
|
||||
margin-left: 60px;
|
||||
overflow-y: auto;
|
||||
@ -816,160 +729,6 @@ const number2code = (num) => {
|
||||
}
|
||||
}
|
||||
|
||||
.rightbc {
|
||||
background-image: url("@/assets/bdscreenImg/three/rightbg.png");
|
||||
background-size: 100%;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 1700px;
|
||||
height: 1937px;
|
||||
|
||||
.bt {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 1650px;
|
||||
left: 36px;
|
||||
top: 46px;
|
||||
display: flex;
|
||||
|
||||
.btitem {
|
||||
width: 170px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
color: white;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url("@/assets/bdscreenImg/three/noactive.png");
|
||||
background-size: 100%;
|
||||
margin-left: 30px;
|
||||
font-size: 33px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btitemActive {
|
||||
background-image: url("@/assets/bdscreenImg/three/active.png");
|
||||
}
|
||||
}
|
||||
|
||||
.tableArea {
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
top: 146px;
|
||||
height: 1700px;
|
||||
width: 1650px;
|
||||
|
||||
.headColumn {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
height: 80px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
color: #00FFF5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:nth-child(1) {
|
||||
flex: .8;
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
flex: 1.8;
|
||||
}
|
||||
|
||||
:nth-child(3) {
|
||||
flex: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
.contentArea {
|
||||
margin-top: 30px;
|
||||
height: 1600px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
background-color: #0b222d;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contentItem {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 34px;
|
||||
color: #FFFFFF;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
:nth-child(1) {
|
||||
flex: .8;
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
flex: 1.8;
|
||||
}
|
||||
|
||||
:nth-child(3) {
|
||||
flex: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
.singleOrDouble {
|
||||
background-color: rgba(10, 165, 239, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centerArea {
|
||||
background-size: 100%;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 4385px;
|
||||
height: 1790px;
|
||||
background-image: url("@/assets/bdscreenImg/three/centerbac.png");
|
||||
background-size: 100%;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
top: 50px;
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.imgArea {
|
||||
position: absolute;
|
||||
left: 48px;
|
||||
top: 177px;
|
||||
width: 4290px;
|
||||
height: 1537px;
|
||||
background-color: fuchsia;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/*图例*/
|
||||
.legend-div {
|
||||
width: 601px;
|
||||
@ -1087,5 +846,159 @@ const number2code = (num) => {
|
||||
}
|
||||
}
|
||||
|
||||
.rightbc {
|
||||
background-image: url("@/assets/bdscreenImg/three/rightbg.png");
|
||||
background-size: 100%;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 1700px;
|
||||
height: 1937px;
|
||||
|
||||
.bt {
|
||||
position: absolute;
|
||||
height: 80px;
|
||||
width: 1650px;
|
||||
left: 36px;
|
||||
top: 46px;
|
||||
display: flex;
|
||||
|
||||
.btitem {
|
||||
width: 170px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
color: white;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-image: url("@/assets/bdscreenImg/three/noactive.png");
|
||||
background-size: 100%;
|
||||
margin-left: 30px;
|
||||
font-size: 33px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.btitemActive {
|
||||
background-image: url("@/assets/bdscreenImg/three/active.png");
|
||||
}
|
||||
}
|
||||
|
||||
.tableArea {
|
||||
position: absolute;
|
||||
left: 36px;
|
||||
top: 146px;
|
||||
height: 1700px;
|
||||
width: 1650px;
|
||||
|
||||
.headColumn {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
height: 80px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 40px;
|
||||
color: #00FFF5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:nth-child(1) {
|
||||
flex: .8;
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
flex: 1.8;
|
||||
}
|
||||
|
||||
:nth-child(3) {
|
||||
flex: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
.contentArea {
|
||||
margin-top: 30px;
|
||||
height: 1600px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
background-color: #0b222d;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contentItem {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 600;
|
||||
font-size: 34px;
|
||||
color: #FFFFFF;
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
:nth-child(1) {
|
||||
flex: .8;
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
flex: 1.8;
|
||||
}
|
||||
|
||||
:nth-child(3) {
|
||||
flex: 1.8;
|
||||
}
|
||||
}
|
||||
|
||||
.singleOrDouble {
|
||||
background-color: rgba(10, 165, 239, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.centerArea {
|
||||
background-size: 100%;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 4385px;
|
||||
height: 1790px;
|
||||
background-image: url("@/assets/bdscreenImg/three/centerbac.png");
|
||||
background-size: 100%;
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 60px;
|
||||
top: 50px;
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.imgArea {
|
||||
position: absolute;
|
||||
left: 48px;
|
||||
top: 177px;
|
||||
width: 4290px;
|
||||
height: 1537px;
|
||||
background-color: fuchsia;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -48,7 +48,7 @@ export const constantRoutes = [
|
||||
// component: screenPage,
|
||||
// hidden: true,
|
||||
// },
|
||||
/* TODO mapTest,prjsMap用于测试地图 */
|
||||
/* TODO mapTest,prjsMap,imgMap用于测试地图 */
|
||||
{
|
||||
path: '/mapTest',
|
||||
component: () => import('@/components/Map/ThreeMapJt/MapIndex.vue'),
|
||||
@ -60,6 +60,12 @@ export const constantRoutes = [
|
||||
component: () => import('@/components/Map/ThreeMapZs/MapIndex.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/imgMap',
|
||||
name:'imgMap',
|
||||
component: () => import('@/components/Map/ThreeMapImg/MapIndex.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
component: () => import('@/views/register'),
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div class="app-container home">
|
||||
<el-button type="primary" @click="$router.push('/screenPage')">goScreen</el-button>
|
||||
<el-button type="primary" @click="$router.push('/prjsMap')">多项目地图</el-button>
|
||||
<el-button type="primary" @click="$router.push('/imgMap')">图片地图</el-button>
|
||||
<el-button type="primary" @click="$router.push('/mapTest')">地图</el-button>
|
||||
<el-button>
|
||||
<a href="http://localhost:82/xjjjgkzx/bjbScreen" target="_blank">新页面</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user