|
|
@@ -70,6 +70,7 @@ const Cesium = (window as any).Cesium
|
|
|
let gCustomDataSource = null
|
|
|
let gPrimitiveCollection = null
|
|
|
let gHandler = null
|
|
|
+let pointDataSource = null //聚合源
|
|
|
//进度查看模块
|
|
|
@Component({ name: 'ProjectPipeSpeedInfoCheck', components: { CommonTreeList } })
|
|
|
export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
@@ -124,6 +125,8 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
}
|
|
|
//防抖
|
|
|
timeout = null
|
|
|
+ //聚合参数
|
|
|
+ pointArrCluster = [] //聚合点数组
|
|
|
//
|
|
|
get marks() {
|
|
|
let t = {}
|
|
|
@@ -232,7 +235,6 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
return
|
|
|
} else {
|
|
|
this.initScanTimes()
|
|
|
- // this.showSpeedInfos(start, end)
|
|
|
}
|
|
|
}
|
|
|
//时间分割函数
|
|
|
@@ -308,6 +310,9 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
: '',
|
|
|
endDate: date ? date.endDate : this.dateValue && this.dateValue[1] ? this.dateValue[1].replaceAll('-', '') : ''
|
|
|
}
|
|
|
+ let s_dt = date ? date.beginDate : this.dateValue && this.dateValue[0] ? this.dateValue[0] : ''
|
|
|
+ let e_dt = date ? date.endDate : this.dateValue && this.dateValue[1] ? this.dateValue[1] : ''
|
|
|
+ this.showSpeedInfos(s_dt, e_dt)
|
|
|
PipeAndNodeProcess(dateRange)
|
|
|
.then((result) => {
|
|
|
if (result.code !== 1 || result.result.length === 0) {
|
|
|
@@ -555,11 +560,274 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
Cesium.ScreenSpaceEventType.MOUSE_MOVE
|
|
|
)
|
|
|
}
|
|
|
+ /**
|
|
|
+ * 显示进度信息
|
|
|
+ * @param {string} s_dt 起始日期
|
|
|
+ * @param {string} e_dt 终止日期
|
|
|
+ */
|
|
|
+ showSpeedInfos(s_dt, e_dt) {
|
|
|
+ const that = this
|
|
|
+ const data = {
|
|
|
+ SDate: s_dt,
|
|
|
+ EDate: e_dt
|
|
|
+ }
|
|
|
+ // this.clearPrimitives()
|
|
|
+ if (!gPrimitiveCollection) {
|
|
|
+ gPrimitiveCollection = new Cesium.PrimitiveCollection()
|
|
|
+ this.viewer.scene.primitives.add(gPrimitiveCollection)
|
|
|
+ } else {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ GetProgress(data)
|
|
|
+ .then((result) => {
|
|
|
+ if (result.code === 1) {
|
|
|
+ if (Object.keys(result.result).length === 0) {
|
|
|
+ // this.$message.success('无进度信息')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ that.pbsInfo(result.result)
|
|
|
+ } else {
|
|
|
+ this.$message.error('查询失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 该方法用于生成查询smid条件
|
|
|
+ * @param pbscodes
|
|
|
+ */
|
|
|
+ pbsInfo(pbscodes) {
|
|
|
+ const layers = []
|
|
|
+ for (let layername in pbscodes) {
|
|
|
+ const pbsLayer = layername.split(',')[0]
|
|
|
+ const codes = pbscodes[layername]
|
|
|
+ layers.push({ name: pbsLayer, codes: codes })
|
|
|
+ }
|
|
|
+ const fieldname = 'CODE'
|
|
|
+ if (layers.length == 0) {
|
|
|
+ this.$message.success('无施工进度信息')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const url = this.apiurls.smiddtfw
|
|
|
+ const filterPars = layers.map((item) => {
|
|
|
+ const pipeConfig = _.find(gPipe, function (pipe) {
|
|
|
+ return pipe.origindataset === item.name
|
|
|
+ })
|
|
|
+ let str = ''
|
|
|
+ item.codes.forEach((item, index) => {
|
|
|
+ if (index == 0) {
|
|
|
+ str += "'" + item + "'"
|
|
|
+ } else {
|
|
|
+ str += ",'" + item + "'"
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return new SuperMap.REST.FilterParameter({
|
|
|
+ name: pipeConfig.smidmapname,
|
|
|
+ attributeFilter: fieldname + ' in (' + str + ')',
|
|
|
+ fields: [fieldname]
|
|
|
+ })
|
|
|
+ })
|
|
|
+ const options = {
|
|
|
+ url: url,
|
|
|
+ filterParameters: filterPars,
|
|
|
+ queryOption: SuperMap.REST.QueryOption.ATTRIBUTEANDGEOMETRY,
|
|
|
+ completed: this.queryComplete.bind(this),
|
|
|
+ failed: function (error) {
|
|
|
+ console.error(error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ queryMapByAttribute(options)
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 查询成功
|
|
|
+ * @param result
|
|
|
+ */
|
|
|
+ queryComplete(result) {
|
|
|
+ this.flashMapService(result.originResult.recordsets)
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ * 该方法用于添加二维管线高亮
|
|
|
+ * @param records
|
|
|
+ */
|
|
|
+ flashMapService(records) {
|
|
|
+ const that = this
|
|
|
+ if (!records || records.length === 0) return
|
|
|
+ // if (!gPrimitiveCollection) return
|
|
|
+ // const primtCol = gPrimitiveCollection
|
|
|
+ records.forEach((record) => {
|
|
|
+ if (record.features.length == 0) return false
|
|
|
+ record.features.forEach((feature) => {
|
|
|
+ const geometry = feature.geometry.points
|
|
|
+ const geotype = feature.geometry.type.toLowerCase().indexOf('line') > -1 ? 'LINE' : 'POINT'
|
|
|
+ if (geotype === 'LINE') {
|
|
|
+ const pointL = [geometry[0].x, geometry[0].y, geometry[0].z]
|
|
|
+ this.pointArrCluster.push(pointL)
|
|
|
+ } else {
|
|
|
+ const pointR = [geometry[0].x, geometry[0].y, geometry[0].z]
|
|
|
+ this.pointArrCluster.push(pointR)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.clustering() //聚合显示
|
|
|
+ }
|
|
|
+ //聚合显示
|
|
|
+ clustering() {
|
|
|
+ var that = this
|
|
|
+ // this.viewer.dataSources.removeAll()
|
|
|
+ //聚合参数
|
|
|
+ pointDataSource = new Cesium.CustomDataSource('pointData')
|
|
|
+ this.pointArrCluster.forEach((item) => {
|
|
|
+ var entity = pointDataSource.entities.add({
|
|
|
+ position: Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2] + 100),
|
|
|
+ billboard: {
|
|
|
+ image: that.getDrawCanvas(1, 5),
|
|
|
+ width: 50,
|
|
|
+ height: 50,
|
|
|
+ heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ var dataSourcePromise = this.viewer.dataSources.add(pointDataSource)
|
|
|
+ dataSourcePromise.then(function (dataSource) {
|
|
|
+ var pixelRange = 100 //聚合距离，以像素为单位，小于这个距离就会被聚合
|
|
|
+ var minimumClusterSize = 2 //每个聚合点的最小聚合个数
|
|
|
+ var enabled = true
|
|
|
+
|
|
|
+ dataSource.clustering.enabled = enabled
|
|
|
+ dataSource.clustering.pixelRange = pixelRange
|
|
|
+ dataSource.clustering.minimumClusterSize = minimumClusterSize
|
|
|
+
|
|
|
+ var removeListener
|
|
|
+ function customStyle() {
|
|
|
+ if (Cesium.defined(removeListener)) {
|
|
|
+ removeListener()
|
|
|
+ removeListener = undefined
|
|
|
+ } else {
|
|
|
+ removeListener = dataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
|
|
|
+ if (!cluster) return
|
|
|
+ cluster.label.show = false
|
|
|
+ cluster.billboard.show = true
|
|
|
+ cluster.billboard.id = cluster.label.id
|
|
|
+ cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM
|
|
|
+
|
|
|
+ if (clusteredEntities.length >= 100) {
|
|
|
+ cluster.billboard.image = that.getDrawCanvas(clusteredEntities.length, 1)
|
|
|
+ } else if (clusteredEntities.length >= 50) {
|
|
|
+ cluster.billboard.image = that.getDrawCanvas(clusteredEntities.length, 2)
|
|
|
+ } else if (clusteredEntities.length >= 10) {
|
|
|
+ cluster.billboard.image = that.getDrawCanvas(clusteredEntities.length, 3)
|
|
|
+ } else {
|
|
|
+ var singleDigit = new Array(8)
|
|
|
+ for (var i = 0; i < singleDigit.length; ++i) {
|
|
|
+ singleDigit[i] = that.getDrawCanvas(i + 2, 4)
|
|
|
+ }
|
|
|
+ cluster.billboard.image = singleDigit[clusteredEntities.length - 2]
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // force a re-cluster with the new styling
|
|
|
+ var pixelRange = dataSource.clustering.pixelRange
|
|
|
+ dataSource.clustering.pixelRange = 0
|
|
|
+ dataSource.clustering.pixelRange = pixelRange
|
|
|
+ }
|
|
|
+ // start with custom style
|
|
|
+ customStyle()
|
|
|
+ var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
|
|
|
+ handler.setInputAction(function (movement) {
|
|
|
+ var pickedLabel = that.viewer.scene.pick(movement.position)
|
|
|
+ if (Cesium.defined(pickedLabel)) {
|
|
|
+ var ids = pickedLabel.id
|
|
|
+ if (Array.isArray(ids)) {
|
|
|
+ for (var i = 0; i < ids.length; ++i) {
|
|
|
+ ids[i].billboard.color = Cesium.Color.RED
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ getDrawCanvas(text, level) {
|
|
|
+ var canvas = document.createElement('canvas')
|
|
|
+ var ctx = canvas.getContext('2d')
|
|
|
+ canvas.height = 100
|
|
|
+ canvas.width = 100
|
|
|
+ switch (level) {
|
|
|
+ case 1:
|
|
|
+ ctx.beginPath()
|
|
|
+ var grad = ctx.createRadialGradient(50, 50, 0, 50, 50, 50)
|
|
|
+ grad.addColorStop(0.8, 'rgba(159,33,200,0.8)')
|
|
|
+ grad.addColorStop(1, 'rgba(159,33,200,0.4)')
|
|
|
+ ctx.fillStyle = grad
|
|
|
+ ctx.arc(50, 50, 50, 0, 2 * Math.PI, true)
|
|
|
+ ctx.fill()
|
|
|
+ //加入字体
|
|
|
+ ctx.font = '30px bold 楷体'
|
|
|
+ ctx.fillStyle = 'white'
|
|
|
+ ctx.fillText(text, (canvas.width - ctx.measureText(text).width) / 2, canvas.height - 40)
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ ctx.beginPath()
|
|
|
+ var grad = ctx.createRadialGradient(45, 45, 0, 45, 45, 45)
|
|
|
+ grad.addColorStop(0.8, 'rgba(44,72,240,0.8)')
|
|
|
+ grad.addColorStop(1, 'rgba(44,72,240,0.4)')
|
|
|
+ ctx.fillStyle = grad
|
|
|
+ ctx.arc(45, 45, 45, 0, 2 * Math.PI, true)
|
|
|
+ ctx.fill()
|
|
|
+ //
|
|
|
+ ctx.font = '30px bold 楷体'
|
|
|
+ ctx.fillStyle = 'white'
|
|
|
+ ctx.fillText(text, (canvas.width - ctx.measureText(text).width) / 2.5, canvas.height - 40)
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ ctx.beginPath()
|
|
|
+ var grad = ctx.createRadialGradient(40, 40, 0, 40, 40, 40)
|
|
|
+ grad.addColorStop(0.8, 'rgba(214,116,10,0.8)')
|
|
|
+ grad.addColorStop(1, 'rgba(214,116,10,0.4)')
|
|
|
+ ctx.fillStyle = grad
|
|
|
+ ctx.arc(40, 40, 40, 0, 2 * Math.PI, true)
|
|
|
+ ctx.fill()
|
|
|
+ //
|
|
|
+ ctx.font = '30px bold 楷体'
|
|
|
+ ctx.fillStyle = 'white'
|
|
|
+ ctx.fillText(text, (canvas.width - ctx.measureText(text).width) / 3, canvas.height - 50)
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ ctx.beginPath()
|
|
|
+ var grad = ctx.createRadialGradient(30, 30, 0, 30, 30, 30)
|
|
|
+ grad.addColorStop(0.8, 'rgba(2,138,63,0.8)')
|
|
|
+ grad.addColorStop(1, 'rgba(2,138,63,0.4)')
|
|
|
+ ctx.fillStyle = grad
|
|
|
+ ctx.arc(30, 30, 30, 0, 2 * Math.PI, true)
|
|
|
+ ctx.fill()
|
|
|
+ //
|
|
|
+ ctx.font = '30px bold 楷体'
|
|
|
+ ctx.fillStyle = 'white'
|
|
|
+ ctx.fillText(text, (canvas.width - ctx.measureText(text).width) / 4, canvas.height - 60)
|
|
|
+ break
|
|
|
+ case 5:
|
|
|
+ ctx.beginPath()
|
|
|
+ var grad = ctx.createRadialGradient(50, 50, 0, 50, 50, 50)
|
|
|
+ grad.addColorStop(0.8, 'rgba(2,138,63,0.8)')
|
|
|
+ grad.addColorStop(1, 'rgba(2,138,63,0.4)')
|
|
|
+ ctx.fillStyle = grad
|
|
|
+ ctx.arc(50, 50, 50, 0, 2 * Math.PI, true)
|
|
|
+ ctx.fill()
|
|
|
+ //
|
|
|
+ ctx.font = '50px bold 楷体'
|
|
|
+ ctx.fillStyle = 'white'
|
|
|
+ ctx.fillText(text, (canvas.width - ctx.measureText(text).width) / 2, canvas.height - 30)
|
|
|
+ break
|
|
|
+ }
|
|
|
+ return canvas
|
|
|
+ }
|
|
|
//清除进度信息
|
|
|
clearSpeedInfos() {
|
|
|
this.viewer.scene.layers.releaseSelection()
|
|
|
this.removeLabels()
|
|
|
this.clearPrimitives()
|
|
|
+ this.clearClusterDataSource()
|
|
|
}
|
|
|
//该方法用于清除entity label
|
|
|
removeLabels() {
|
|
|
@@ -578,6 +846,13 @@ export default class ProjectPipeSpeedInfoCheck extends Vue {
|
|
|
if (isDel) gPrimitiveCollection = null
|
|
|
}
|
|
|
}
|
|
|
+ //清除聚合数据源
|
|
|
+ clearClusterDataSource() {
|
|
|
+ if (pointDataSource) {
|
|
|
+ this.viewer.dataSources.remove(pointDataSource)
|
|
|
+ pointDataSource = null
|
|
|
+ }
|
|
|
+ }
|
|
|
close() {
|
|
|
this.$store.state.bigScreen.isShowPipeSpeedInfoCheck = false
|
|
|
if (this.pipeInfo) {
|
xieqy