{"remainingRequest":"D:\\jenkins\\workspace\\bbsl-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\bbsl-fvue\\src\\views\\frontScreens\\components\\gisTabComponents\\DailyRainfall.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\bbsl-fvue\\src\\views\\frontScreens\\components\\gisTabComponents\\DailyRainfall.vue","mtime":1684458238559},{"path":"D:\\jenkins\\workspace\\bbsl-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\bbsl-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\bbsl-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport * as d3 from 'd3'\r\nimport {gisCompMixin} from '@/mixins/gisCompMixin.js'\r\nimport dictUtils from '@/components/dict/DictSelectUtils.js'\r\nimport DailyModel from '@/views/frontScreens/components/gisTabComponents/module/DailyModel'\r\nimport gisMap from '@/api/frontScreen/gisMap.js'\r\nexport default {\r\n    name: 'DailyRainfall',\r\n    mixins: [gisCompMixin],\r\n\tcomponents: {DailyModel},\r\n    data() {\r\n        return {\r\n            // 指定坐标字段\r\n            lg: 'lgtd',\r\n            lt: 'lttd',\r\n            czyyfl: [],\r\n\t\t\tcurrentPoint: {},\r\n            params: {\r\n                appTypeList: [],\r\n                stnm: '',\r\n            },\r\n\t\t\tshowInfo:false,\r\n            filterData: [],\r\n            barOverLayer: null,\r\n\t\t\trefreshData:null,\r\n        }\r\n    },\r\n    inject: ['mapData'],\r\n    created() {\r\n        let mapData = this.mapData()\r\n        this.L = mapData.L\r\n        this.map = mapData.map\r\n        this.czyyfl = dictUtils.getDictItemsFromCache('czyyfl')\r\n    },\r\n    mounted() {\r\n        this.$nextTick(async () => {\r\n            await this.getFindResList()\r\n            // this.initZhu()\r\n            this.initBar()\r\n            this.initMarkers()\r\n        })\r\n\t\tthis.refreshData=setInterval(()=>{\r\n\t\tthis.getFindResList()\r\n\t\tthis.updateMarkers()\r\n\t\t},1000*60*10);\r\n    },\r\n\tbeforeDestroy(){\r\n\tclearInterval(this.refreshData);\r\n\tthis.refreshData=null;\r\n\t},\r\n    methods: {\r\n        initBar() {\r\n            let map = this.map\r\n            let width = 6\r\n            let height = 1\r\n            let tableData = this.filterData\r\n            let sels\r\n            this.barOverLayer = this.L.d3SvgOverlay(function (sel, proj) {\r\n                sels = sel\r\n                let citiesUpd = sel.selectAll('rect').data(tableData)\r\n                citiesUpd\r\n                    .enter()\r\n                    .append('rect')\r\n                    .attr('class', 'rect')\r\n                    .attr('x', width / 2)\r\n                    .attr('y', function (d2, i) {\r\n                        if (d2.dyp > 100) {\r\n                            return -d2.dyp * (height / 2)\r\n                        } else {\r\n                            return -d2.dyp * height\r\n                        }\r\n                    })\r\n                    .attr('width', width)\r\n                    .attr('height', function (d2, i) {\r\n                        if (d2.dyp > 100) {\r\n                            return d2.dyp * (height / 2)\r\n                        } else {\r\n                            return d2.dyp * height\r\n                        }\r\n                    })\r\n                    .attr('fill', '#1451a0')\r\n                    .attr('transform', function (d2, i) {\r\n                        let _latlng = new L.latLng(d2.lttd, d2.lgtd)\r\n                        return (\r\n                            'translate(' +\r\n                            map.latLngToLayerPoint(_latlng).x +\r\n                            ',' +\r\n                            map.latLngToLayerPoint(_latlng).y +\r\n                            ')'\r\n                        )\r\n                    })\r\n                    .attr('stroke', '#409eff')\r\n                    .attr('stroke-width', 1)\r\n            })\r\n\r\n            this.barOverLayer.addTo(this.map)\r\n            \r\n            \r\n            function update(sel, proj) {\r\n                sel.selectAll('rect').each(function (d, i) {\r\n                    if (d && d.lgtd && d.lttd) {\r\n                        var _latlng = new L.latLng(d.lttd, d.lgtd)\r\n                        d3.select(this).attr(\r\n                            'transform',\r\n                            'translate(' +\r\n                                map.latLngToLayerPoint(_latlng).x +\r\n                                ',' +\r\n                                map.latLngToLayerPoint(_latlng).y +\r\n                                ')'\r\n                        )\r\n                    }\r\n                })\r\n            }\r\n        },\r\n        async changeStation(val) {\r\n            // this.params.appList = val\r\n            await this.getFindResList()\r\n            this.searchClear = true\r\n            this.clearMarkers()\r\n            this.searchClear = false\r\n            this.initBar()\r\n            this.initMarkers()\r\n        },\r\n        async changeSearch(val) {\r\n            // this.params.stnm = val\r\n            await this.getFindResList()\r\n            this.searchClear = true\r\n            this.clearMarkers()\r\n            this.searchClear = false\r\n            this.initBar()\r\n            this.initMarkers()\r\n        },\r\n        updateMarkers() {\r\n            // 获得新的列表数据后清除旧的标点、重新创建地图标点\r\n            this.searchClear = true\r\n            this.clearMarkers()\r\n            this.searchClear = false\r\n            this.initBar()\r\n            this.initMarkers()\r\n        },\r\n        getFindResList() {\r\n            return new Promise((resolve, reject) => {\r\n                gisMap.dayYlList(this.params, (res) => {\r\n                    if (res.state) {\r\n                        this.filterData = res.value\r\n                        resolve()\r\n                    }\r\n                    reject()\r\n                })\r\n            })\r\n        },\r\n        customClear() {\r\n            if (this.barOverLayer) {\r\n                this.map.removeLayer(this.barOverLayer)\r\n                this.barOverLayer = null\r\n            }\r\n        },\r\n        initZhu() {\r\n            let map = this.map\r\n            let tableData = this.filterData\r\n            var svg = d3\r\n                .select(map.getPanes().overlayPane)\r\n                .append('svg')\r\n                .attr('class', 'leaflet-zoom-hide')\r\n            function drawRect() {\r\n                let width = 4\r\n                let height = 1\r\n                var rects = svg\r\n                    .selectAll('g.rectg')\r\n                    .data(tableData)\r\n                    .enter()\r\n                    .append('g')\r\n                    .attr('class', 'rectg')\r\n\r\n                rects.each(function (d1, i) {\r\n                    if (d1.dyp) {\r\n                        let data = [d1.dyp]\r\n                        d3.select(this)\r\n                            .selectAll('g.rect')\r\n                            .data(data)\r\n                            .enter()\r\n                            .append('rect')\r\n                            .attr('class', 'rect')\r\n                            .attr('x', width / 2)\r\n                            .attr('y', function (d2, i) {\r\n                                if (d2 > 100) {\r\n                                    return -d2 * (height / 2)\r\n                                } else {\r\n                                    return -d2 * height\r\n                                }\r\n                            })\r\n                            .attr('width', 10)\r\n                            .attr('height', function (d2, i) {\r\n                                if (d2 > 100) {\r\n                                    return d2 * (height / 2)\r\n                                } else {\r\n                                    return d2 * height\r\n                                }\r\n                            })\r\n\r\n                            .attr('fill', '#4db7ff')\r\n                    }\r\n                })\r\n            }\r\n            function update() {\r\n                svg.selectAll('g.rectg').each(function (d, i) {\r\n                    if (d && d.lgtd && d.lttd) {\r\n                        var _latlng = new L.latLng(d.lttd, d.lgtd)\r\n                        d3.select(this).attr(\r\n                            'transform',\r\n                            'translate(' +\r\n                                map.latLngToLayerPoint(_latlng).x +\r\n                                ',' +\r\n                                map.latLngToLayerPoint(_latlng).y +\r\n                                ')'\r\n                        )\r\n                    }\r\n                })\r\n            }\r\n\r\n            function initial() {\r\n                svg.attr('width', 1920).attr('height', 2000)\r\n                drawRect()\r\n            }\r\n            //初始化画图的函数\r\n            initial()\r\n            update()\r\n            //事件响应\r\n            map.on('zoom', update)\r\n        },\r\n        infoWindow() {\r\n            let sContent = this.$refs.DailyModel.$el\r\n            var infoWin = new L.popup({\r\n                autoPan: true,\r\n                maxHeight: 500,\r\n                maxWidth: 600,\r\n                minWidth: 500,\r\n            }).setContent(sContent)\r\n            return infoWin\r\n        },\r\n\t\t// 点击列表行创建对应标点\r\n\t\trowClick(row) {\r\n\t\t  if (!row[this.lt] || !row[this.lg]) {\r\n\t\t    this.$message.warning('暂无点位数据')\r\n\t\t    return\r\n\t\t  }\r\n\t\t  this.currentPoint = row\r\n\t\t  \r\n\t\t  \r\n\t\t  let latlng = new L.latLng(row[this.lt], row[this.lg])\r\n\t\t  this.initMark(latlng, row)\r\n\t\t  this.inits(row)\r\n\t\t},\r\n\t\tinits(row) {\r\n\t\t   let map = this.map\r\n\t\t   let width = 6\r\n\t\t   let height = 1\r\n\t\t   let tableData = []\r\n\t\t   tableData.push(row)\r\n\t\t   let sels\r\n\t\t   this.barOverLayer = this.L.d3SvgOverlay(function (sel, proj) {\r\n\t\t       sels = sel\r\n\t\t       let citiesUpd = sel.selectAll('rect').data(tableData)\r\n\t\t       citiesUpd\r\n\t\t           .enter()\r\n\t\t           .append('rect')\r\n\t\t           .attr('class', 'rect')\r\n\t\t           .attr('x', width / 2)\r\n\t\t           .attr('y', function (d2, i) {\r\n\t\t               if (d2.dyp > 100) {\r\n\t\t                   return -d2.dyp * (height / 2)\r\n\t\t               } else {\r\n\t\t                   return -d2.dyp * height\r\n\t\t               }\r\n\t\t           })\r\n\t\t           .attr('width', width)\r\n\t\t           .attr('height', function (d2, i) {\r\n\t\t               if (d2.dyp > 100) {\r\n\t\t                   return d2.dyp * (height / 2)\r\n\t\t               } else {\r\n\t\t                   return d2.dyp * height\r\n\t\t               }\r\n\t\t           })\r\n\t\t           .attr('fill', '#1451a0')\r\n\t\t           .attr('transform', function (d2, i) {\r\n\t\t               let _latlng = new L.latLng(d2.lttd, d2.lgtd)\r\n\t\t               return (\r\n\t\t                   'translate(' +\r\n\t\t                   map.latLngToLayerPoint(_latlng).x +\r\n\t\t                   ',' +\r\n\t\t                   map.latLngToLayerPoint(_latlng).y +\r\n\t\t                   ')'\r\n\t\t               )\r\n\t\t           })\r\n\t\t           .attr('stroke', '#409eff')\r\n\t\t           .attr('stroke-width', 1)\r\n\t\t   })\r\n\t\t   \r\n\t\t   this.barOverLayer.addTo(this.map)\r\n\t\t   \r\n\t\t   \r\n\t\t   function update(sel, proj) {\r\n\t\t       sel.selectAll('rect').each(function (d, i) {\r\n\t\t           if (d && d.lgtd && d.lttd) {\r\n\t\t               var _latlng = new L.latLng(d.lttd, d.lgtd)\r\n\t\t               d3.select(this).attr(\r\n\t\t                   'transform',\r\n\t\t                   'translate(' +\r\n\t\t                       map.latLngToLayerPoint(_latlng).x +\r\n\t\t                       ',' +\r\n\t\t                       map.latLngToLayerPoint(_latlng).y +\r\n\t\t                       ')'\r\n\t\t               )\r\n\t\t           }\r\n\t\t       })\r\n\t\t   }\r\n\t\t},\r\n\t\tinitMark(latlng,row){\r\n\t\t\tthis.updateMarkers()\r\n\t\t\tthis.LayerGroup = null\r\n\t\t\tthis.markerslayer = []\r\n\t\t\tconst label = new L.divIcon({\r\n\t\t\t    html: `<div style=\"color:#BBFFFF\">${\r\n\t\t\t        row.stnm + '-' \r\n\t\t\t    }\r\n\t\t\t\t<span style=\"color:#ffcc00\">\r\n\t\t\t\t${\r\n\t\t\t\t\t row.dyp + 'mm'\r\n\t\t\t\t}\r\n\t\t\t\t</span>\r\n\t\t\t\t<div>`,\r\n\t\t\t    className: 'my-divIcon',\r\n\t\t\t    iconSize: 75,\r\n\t\t\t    iconAnchor: L.point(20, 0),\r\n\t\t\t})\r\n\t\t\tlet sectionMarker = new L.marker(latlng, {\r\n\t\t\t    icon: label,\r\n\t\t\t})\r\n\t\t\tlet infoWin = this.infoWindow()\r\n\t\t\tsectionMarker.addEventListener('click', () => {\r\n\t\t\t\tthis.currentPoint = row\r\n\t\t\t\tinfoWin.update()\r\n\t\t\t\tthis.showInfo = true\r\n\t\t\t  \r\n\t\t\t})\r\n\t\t\tthis.currentPoint = row\r\n\t\t\tthis.markerslayer.push(sectionMarker)\r\n\t\t\tsectionMarker.addTo(this.map).bindPopup(infoWin)\r\n\t\t\tthis.LayerGroup = new L.layerGroup(this.markerslayer)\r\n\t\t\tthis.map.addLayer(this.LayerGroup)\r\n\t\t\tthis.showInfo = true\r\n\t\t\tsectionMarker.bindPopup(infoWin).openPopup()\r\n\t\t\tthis.map.setView(sectionMarker.getLatLng(), 14)\r\n\t\t},\r\n\t\t\r\n\t\tupdateMarkers() {\r\n\t\t\t// 获得新的列表数据后清除旧的标点、重新创建地图标点\r\n\t\t\tthis.searchClear = true\r\n\t\t\tthis.clearMarkers()\r\n\t\t\t\r\n\t\t},\r\n\t\tinitMarkers() {\r\n            this.LayerGroup = null\r\n            this.markerslayer = []\r\n            this.filterData.forEach((item) => {\r\n                if (item.dyp) {\r\n                    let latlng = new L.latLng(item.lttd, item.lgtd)\r\n                    const label = new L.divIcon({\r\n                        html: `<div style=\"color:#BBFFFF\">${\r\n                            item.stnm + '-' \r\n                        }\r\n\t\t\t\t\t\t<span style=\"color:#ffcc00\">\r\n\t\t\t\t\t\t${\r\n\t\t\t\t\t\t\t item.dyp + 'mm'\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<div>`,\r\n                        className: 'my-divIcon',\r\n                        iconSize: 75,\r\n                        iconAnchor: L.point(20, 0),\r\n                    })\r\n                    let sectionMarker = new L.marker(latlng, {\r\n                        icon: label,\r\n                    })\r\n\t\t\t\t\tlet infoWin = this.infoWindow()\r\n\t\t\t\t\tsectionMarker.addEventListener('click', () => {\r\n\t\t\t\t\t\tthis.currentPoint = item\r\n\t\t\t\t\t\tinfoWin.update()\r\n\t\t\t\t\t\tthis.showInfo = true\r\n\t\t\t\t\t  \r\n\t\t\t\t\t})\r\n                    this.markerslayer.push(sectionMarker)\r\n\t\t\t\t\tsectionMarker.addTo(this.map).bindPopup(infoWin)\r\n                }\r\n            })\r\n            this.LayerGroup = new L.layerGroup(this.markerslayer)\r\n            this.map.addLayer(this.LayerGroup)\r\n\t\t\t\r\n        },\r\n    },\r\n}\r\n",null]}