{"remainingRequest":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\reform-fvue\\src\\views\\BigScreen\\components\\subComponents\\mapTarget1.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\reform-fvue\\src\\views\\BigScreen\\components\\subComponents\\mapTarget1.vue","mtime":1687876025320},{"path":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\reform-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\reform-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//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\nimport * as echarts from 'echarts'\r\nimport cq from '@/assets/js/cq.js'\r\nimport main9 from '@/assets/js/main9.js'\r\nimport fakeData from '@/views/BigScreen/js/fakeData_district.js'\r\nimport apiList from '@/api/bigScreen/districView.js'\r\n// import {\r\n// initLayer,\r\n// mapClickEvent,\r\n// getFiveColor,\r\n// getAreaCode,\r\n// setLayerVisible,\r\n// setLayerOpacity,\r\n// zoomInit\r\n// } from 'dlzx-five-color-ags-v2'\r\n// import {loadModules} from 'esri-loader'\r\nexport default {\r\n props: {\r\n options: {\r\n type: Object,\r\n default: () => {\r\n return {}\r\n }\r\n },\r\n CQId: {\r\n type: String,\r\n default: 'cq-contianer_1'\r\n },\r\n main9Id: {\r\n type: String,\r\n default: 'main9-contianer_1'\r\n },\r\n isClick: {\r\n type: Boolean,\r\n default: true\r\n }\r\n },\r\n data() {\r\n return {\r\n loadingColor: 'rgba(6, 46, 106, 0.4)',\r\n loading: false,\r\n myChartCQ: null,\r\n optionCQ: null,\r\n myChartMain: null,\r\n optionMain: null,\r\n levelTitle: ['区县', '项目数'],\r\n levelDataA: [],\r\n levelDataB: [],\r\n levelDataC: [],\r\n levelDataD: [],\r\n levelDataE: [],\r\n areaCode: [\r\n {\r\n code: 500120,\r\n name: '璧山区'\r\n },\r\n {\r\n code: 500155,\r\n name: '梁平区'\r\n },\r\n {\r\n code: 500241,\r\n name: '秀山县'\r\n },\r\n {\r\n code: 500231,\r\n name: '垫江县'\r\n },\r\n {\r\n code: 500109,\r\n name: '北碚区'\r\n },\r\n {\r\n code: 500229,\r\n name: '城口县'\r\n },\r\n {\r\n code: 500230,\r\n name: '丰都县'\r\n },\r\n {\r\n code: 500113,\r\n name: '巴南区'\r\n },\r\n {\r\n code: 500152,\r\n name: '潼南区'\r\n },\r\n {\r\n code: 500235,\r\n name: '云阳县'\r\n },\r\n {\r\n code: 500233,\r\n name: '忠县'\r\n },\r\n {\r\n code: 500238,\r\n name: '巫溪县'\r\n },\r\n {\r\n code: 500108,\r\n name: '南岸区'\r\n },\r\n {\r\n code: 500107,\r\n name: '九龙坡区'\r\n },\r\n {\r\n code: 500112,\r\n name: '渝北区'\r\n },\r\n {\r\n code: 500116,\r\n name: '江津区'\r\n },\r\n {\r\n code: 500119,\r\n name: '南川区'\r\n },\r\n {\r\n code: 500154,\r\n name: '开州区'\r\n },\r\n {\r\n code: 500118,\r\n name: '永川区'\r\n },\r\n {\r\n code: 500110,\r\n name: '綦江区'\r\n },\r\n {\r\n code: 500243,\r\n name: '彭水县'\r\n },\r\n {\r\n code: 500106,\r\n name: '沙坪坝区'\r\n },\r\n {\r\n code: 500153,\r\n name: '荣昌区'\r\n },\r\n {\r\n code: 500156,\r\n name: '武隆区'\r\n },\r\n {\r\n code: 500236,\r\n name: '奉节县'\r\n },\r\n {\r\n code: 500102,\r\n name: '涪陵区'\r\n },\r\n {\r\n code: 500240,\r\n name: '石柱县'\r\n },\r\n {\r\n code: 500117,\r\n name: '合川区'\r\n },\r\n {\r\n code: 500115,\r\n name: '长寿区'\r\n },\r\n {\r\n code: 500103,\r\n name: '渝中区'\r\n },\r\n {\r\n code: 500111,\r\n name: '大足区'\r\n },\r\n {\r\n code: 500237,\r\n name: '巫山县'\r\n },\r\n {\r\n code: 500101,\r\n name: '万州区'\r\n },\r\n {\r\n code: 500114,\r\n name: '黔江区'\r\n },\r\n {\r\n code: 500104,\r\n name: '大渡口区'\r\n },\r\n {\r\n code: 500105,\r\n name: '江北区'\r\n },\r\n {\r\n code: 500242,\r\n name: '酉阳县'\r\n },\r\n {\r\n code: 500151,\r\n name: '铜梁区'\r\n },\r\n {\r\n code: 500200,\r\n name: '两江新区'\r\n },\r\n {\r\n code: 500300,\r\n name: '高新区'\r\n },\r\n {\r\n code: 500222,\r\n name: '万盛经开区'\r\n }\r\n ],\r\n viewLayer: null,\r\n layer: null\r\n }\r\n },\r\n mounted() {\r\n this.initData()\r\n this.$bus.$on('changeDate', () => {\r\n this.initData()\r\n })\r\n this.$nextTick(() => {\r\n this.initMapMain()\r\n this.initMapCQ()\r\n })\r\n this.$root.$on('resize', () => {\r\n this.resize(500)\r\n })\r\n },\r\n methods: {\r\n handleDetail(comp, unitName, type) {\r\n this.$router.push({\r\n path: '/DetailComponent',\r\n name: 'DetailComponent',\r\n query: {\r\n unitName,\r\n comp,\r\n type\r\n }\r\n })\r\n },\r\n initData() {\r\n this.loading = true\r\n let searchDate = sessionStorage.getItem('searchDate')\r\n searchDate = JSON.parse(searchDate)\r\n let data = this.qs.stringify({\r\n year: searchDate.year,\r\n quarter: searchDate.quarter\r\n })\r\n this.levelDataA = []\r\n this.levelDataB = []\r\n this.levelDataC = []\r\n this.levelDataD = []\r\n this.levelDataE = []\r\n apiList.statementDetail(data, res => {\r\n if (res) {\r\n this.$bus.$emit('exportExcel', res)\r\n this.formatSortData(res)\r\n }\r\n })\r\n },\r\n formatSortData(data) {\r\n data.sort((a, b) => {\r\n return a.nationalProjectNum - b.nationalProjectNum\r\n })\r\n\r\n data.forEach(item => {\r\n if (item.nationalProjectGrade == 'A') {\r\n this.levelDataA.unshift(item)\r\n }\r\n if (item.nationalProjectGrade == 'B') {\r\n this.levelDataB.unshift(item)\r\n }\r\n if (item.nationalProjectGrade == 'C') {\r\n this.levelDataC.unshift(item)\r\n }\r\n if (item.nationalProjectGrade == 'D') {\r\n this.levelDataD.unshift(item)\r\n }\r\n if (item.nationalProjectGrade == 'E') {\r\n this.levelDataE.unshift(item)\r\n }\r\n })\r\n this.handleMapArea(data, 'composite')\r\n },\r\n handleMapArea(markData, key) {\r\n this.optionCQ.series[0].data = this.convertData(\r\n cq.features,\r\n markData,\r\n key\r\n )\r\n this.optionMain.series[0].data = this.convertData(\r\n main9.features,\r\n markData,\r\n key,\r\n true\r\n )\r\n\r\n this.myChartCQ.setOption(this.optionCQ)\r\n this.myChartMain.setOption(this.optionMain)\r\n this.loading = false\r\n },\r\n convertData(data, mapData, key, showTitle) {\r\n let res = []\r\n for (let i = 0; i < data.length; i++) {\r\n let obj = data[i].properties\r\n let color = '#081c47'\r\n let find = mapData.find(item => item.unitCode == obj.code)\r\n\r\n let regionSnKey = 'allSn'\r\n if (key == 'composite') {\r\n regionSnKey = 'nationalProjectGrade'\r\n }\r\n if (key == 'workable') {\r\n regionSnKey = 'workableAllSn'\r\n }\r\n if (key == 'brand') {\r\n regionSnKey = 'brandAllSn'\r\n }\r\n if (key == 'satisfaction') {\r\n regionSnKey = 'satisfiedAllSn'\r\n }\r\n if (find && key !== 'risk') {\r\n if (find[regionSnKey] == 'A') {\r\n color = '#398C8F'\r\n } else if (find[regionSnKey] == 'B') {\r\n color = '#1970C1'\r\n } else if (find[regionSnKey] == 'C') {\r\n color = '#A3A355'\r\n } else if (find[regionSnKey] == 'D') {\r\n color = '#B0825C'\r\n } else if (find[regionSnKey] == 'E') {\r\n color = '#9B4E55'\r\n }\r\n }\r\n let show = true\r\n let offset = [0, 0]\r\n if (\r\n [\r\n '渝中区',\r\n '大渡口区',\r\n '江北区',\r\n '沙坪坝区',\r\n '九龙坡区',\r\n '南岸区',\r\n '北碚区',\r\n '渝北区',\r\n '巴南区',\r\n '两江新区',\r\n '高新区'\r\n ].includes(obj.name)\r\n ) {\r\n show = false\r\n }\r\n if (['沙坪坝区'].includes(obj.name)) {\r\n offset = [-10, 0]\r\n }\r\n if (['九龙坡区'].includes(obj.name)) {\r\n offset = [-10, -10]\r\n }\r\n if (['大渡口区'].includes(obj.name)) {\r\n offset = [0, 5]\r\n }\r\n if (['江北区'].includes(obj.name)) {\r\n offset = [10, 0]\r\n }\r\n if (['南岸区'].includes(obj.name)) {\r\n offset = [10, 6]\r\n }\r\n if (['綦江区'].includes(obj.name)) {\r\n offset = [0, 20]\r\n }\r\n if (showTitle != undefined) {\r\n show = showTitle\r\n }\r\n if (obj.name == '两江新区' || obj.name == '高新区') {\r\n show = false\r\n }\r\n res.push({\r\n name: obj.name,\r\n value: find ? find['unitCode'] : 0,\r\n itemStyle: {\r\n color: color,\r\n areaColor: color,\r\n label: {\r\n show\r\n }\r\n },\r\n label: {\r\n normal: {\r\n show,\r\n offset, //是否对文字进行偏移。默认不偏移。例如:[30, 40] 表示文字在横向上偏移 30,纵向上偏移 40。\r\n position: 'inside', //标签的位置。// 绝对的像素值[10, 10]\r\n color: '#fff',\r\n fontSize: 12\r\n }\r\n },\r\n emphasis: {\r\n disabled: true\r\n }\r\n })\r\n }\r\n return res\r\n },\r\n initMapCQ() {\r\n let dom = document.getElementById(this.CQId)\r\n let width = getComputedStyle(dom)\r\n .getPropertyValue('width')\r\n .replace('px', '')\r\n let height = getComputedStyle(dom)\r\n .getPropertyValue('height')\r\n .replace('px', '')\r\n width = parseInt(width, 10)\r\n height = parseInt(height, 10)\r\n this.myChartCQ = echarts.init(dom, null, {\r\n renderer: 'svg',\r\n width,\r\n height\r\n })\r\n // 注册 echarts 地图\r\n\r\n echarts.registerMap('cq', cq)\r\n var markPointData = []\r\n let map = 'cq',\r\n top = '40%',\r\n left = '-14%',\r\n zoom = 1.2,\r\n aspectScale = 1,\r\n center = [106.5049, 29], // 地图中心位置, 此处的纬度与下面的center相差1度是形成阴影的距离,可自己随意调整\r\n layoutCenter = ['50%', '50%']\r\n this.optionCQ = {\r\n series: [\r\n {\r\n name: '重庆',\r\n type: 'map', //配置显示方式为用户自定义\r\n map,\r\n zoom, // 地图比例\r\n zlevel: 100,\r\n center, // 地图中心位置, 此处的纬度与下面的center相差1度是形成阴影的距离,可自己随意调整\r\n aspectScale,\r\n // roam: true,\r\n scaleLimit: {\r\n min: 0.6,\r\n max: 4\r\n },\r\n itemStyle: {\r\n normal: {\r\n borderWidth: 1, //设置外层边框\r\n borderColor: '#2ddcfd'\r\n }\r\n },\r\n emphasis: {\r\n disabled: true\r\n },\r\n top,\r\n left,\r\n data: this.convertData(cq.features, fakeData.btnkey1, 'risk')\r\n }\r\n ]\r\n }\r\n this.myChartCQ.setOption(this.optionCQ)\r\n if (this.isClick) {\r\n this.myChartCQ.on('click', params => {\r\n let code = params.value\r\n if (!code) {\r\n code = this.getAreaCode(params.name, cq)\r\n }\r\n this.$router.push({\r\n path: '/DistrictReformSubView',\r\n query: {\r\n name: params.name,\r\n code: code\r\n }\r\n })\r\n let tooltip = document.getElementsByClassName('data-tooltip')\r\n Array.from(tooltip).forEach(item => {\r\n item.remove()\r\n })\r\n })\r\n }\r\n\r\n },\r\n initMapMain() {\r\n this.myChartMain = echarts.init(\r\n document.getElementById(this.main9Id),\r\n null,\r\n {\r\n renderer: 'svg'\r\n }\r\n )\r\n // 注册 echarts 地图\r\n echarts.registerMap('main9', main9)\r\n var markPointData = []\r\n let top = 0,\r\n left = 20,\r\n zoom = 1,\r\n map = 'main9',\r\n aspectScale = 1,\r\n layoutCenter = ['50%', '50%'],\r\n center = [106.204962, 29.533155] // 地图中心位置, 此处的纬度与下面的center相差1度是形成阴影的距离,可自己随意调整\r\n this.optionMain = {\r\n geo: [\r\n {\r\n map,\r\n zoom,\r\n zlevel: 0,\r\n aspectScale,\r\n itemStyle: {\r\n normal: {\r\n borderWidth: 0\r\n }\r\n },\r\n emphasis: {\r\n disabled: true\r\n },\r\n tooltip: {\r\n show: false\r\n },\r\n top,\r\n left,\r\n layoutCenter\r\n }\r\n ],\r\n series: [\r\n {\r\n name: '重庆主城',\r\n type: 'map',\r\n map,\r\n zoom, // 地图比例\r\n zlevel: 100,\r\n // center, // 地图中心位置, 此处的纬度与下面的center相差1度是形成阴影的距离,可自己随意调整\r\n aspectScale,\r\n itemStyle: {\r\n normal: {\r\n borderWidth: 1, //设置外层边框\r\n borderColor: 'white'\r\n }\r\n },\r\n emphasis: {\r\n disabled: true,\r\n itemStyle: {\r\n areaColor: 'yellow'\r\n }\r\n },\r\n top,\r\n left,\r\n data: this.convertData(\r\n main9.features,\r\n fakeData.btnkey1,\r\n 'risk',\r\n true\r\n )\r\n }\r\n ]\r\n }\r\n this.myChartMain.setOption(this.optionMain)\r\n if (this.isClick) {\r\n this.myChartMain.on('click', params => {\r\n let code = params.value\r\n if (!code) {\r\n code = this.getAreaCode(params.name, main9)\r\n }\r\n this.$router.push({\r\n path: '/DistrictReformSubView',\r\n query: {\r\n name: params.name,\r\n code: code\r\n }\r\n })\r\n let tooltip = document.querySelectorAll('.data-tooltip')\r\n Array.from(tooltip).forEach(item => {\r\n item.remove()\r\n })\r\n })\r\n }\r\n\r\n },\r\n resize(delay) {\r\n // 动态计算表格的高度,自适应当前容器\r\n setTimeout(() => {\r\n let dom = document.getElementById(this.CQId)\r\n if (!dom) return\r\n let width = getComputedStyle(dom)\r\n .getPropertyValue('width')\r\n .replace('px', '')\r\n let height = getComputedStyle(dom)\r\n .getPropertyValue('height')\r\n .replace('px', '')\r\n width = parseInt(width, 10)\r\n height = parseInt(height, 10)\r\n this.myChartCQ.resize({\r\n width: width,\r\n height: height\r\n })\r\n this.myChartMain.resize()\r\n }, delay || 0)\r\n },\r\n goToSub(type) {\r\n let data = {\r\n ljxq: {\r\n name: '两江新区',\r\n code: '500191000000'\r\n },\r\n gxq: {\r\n name: '高新区',\r\n code: '500193000000'\r\n }\r\n }\r\n this.$router.push({\r\n path: '/DistrictReformSubView',\r\n query: {\r\n name: data[type].name,\r\n code: data[type].code\r\n }\r\n })\r\n },\r\n // initData() {\r\n // this.loading = true\r\n // let searchDate = sessionStorage.getItem('searchDate')\r\n // searchDate = JSON.parse(searchDate)\r\n // let data = this.qs.stringify({\r\n // year: searchDate.year,\r\n // quarter: searchDate.quarter\r\n // })\r\n // apiList.statementDetail(data, res => {\r\n // if (res) {\r\n // this.$bus.$emit('exportExcel', res)\r\n // this.showData = []\r\n // let fd = ['A', 'B', 'C', 'D', 'E']\r\n // res.forEach(item => {\r\n // let code = 0\r\n // this.areaCode.forEach(codeItem => {\r\n // if (codeItem.name === item.unitName) {\r\n // code = codeItem.code\r\n // }\r\n // })\r\n // this.showData.push({\r\n // code: code,\r\n // value: fd.indexOf(item.nationalProjectGrade)\r\n // })\r\n // })\r\n // console.log(this.showData);\r\n // if (this.viewLayer) {\r\n // this.viewLayer.map.remove(this.layer)\r\n // this.layer = null\r\n // this.addLayer(this.showData)\r\n // } else {\r\n // this.initMap()\r\n // }\r\n // }\r\n // })\r\n // },\r\n // initMap(){\r\n // \t// 初始化地图\r\n // \tloadModules([\r\n // \t\t'esri/Map',\r\n // \t\t'esri/views/MapView',\r\n // \t\t'esri/layers/FeatureLayer'\r\n // \t])\r\n // \t\t.then(async ([Map, MapView, FeatureLayer]) => {\r\n // \t\t\tconst map = new Map({}); // 地图容器\r\n // \t\t\tconst view = new MapView({ // 视图容器\r\n // \t\t\t\tcontainer: 'map-container', // dom元素添加id为map-container的元素\r\n // \t\t\t\tmap,\r\n // \t\t\t\tcenter: [107.74, 30.29], // 地图中心点\r\n // \t\t\t\tzoom:8,\r\n // \t\t\t\tscale:5200000,\r\n // \t\t\t\tzoomFactor: 0.01// 缩放更加平滑\r\n // \t\t\t});\r\n // \t\t\tview.ui.remove('zoom')\r\n // \t\t\tview.ui.remove('attribution')\r\n // \t\t\tthis.viewLayer = view\r\n // \t\t\tawait this.addLayer(this.showData)\r\n // \t\t})\r\n // },\r\n // async addLayer(data){\r\n\r\n // \tif(!this.layer){\r\n // \t\t// 创建五色图\r\n // \t\tlet view = this.viewLayer\r\n // \t\tconst fiveLayerInst = await initLayer({\r\n // env:\"ZWWW\",\r\n // token: 'SkJZSXI0S3RVS05SaXdvaGxWbGh5WFBLX2ZsVzB5cGE0WUhpWHdldXUtVQ==',\r\n // //互联网\r\n // \t\t\t// token: 'WmtBS01BLTdZbzRBMHRTXzE4NFA0cktBcno4VFZiS1ZZUTk1TlVIZEI1VQ==',\r\n // //政务网\r\n // \t\t\t// token:'bXVqMHY0c3ZwWHBSZmIzaXMteDVuN0wwNUNZdmpuU3F2MUdZTFZzNWtEVQ==',\r\n // \t\t\tareaData: data,\r\n // \t\t\trangeData: [1,2,3,4,5],\r\n // \t\t\tinitColor:['#0EE717','#1EBBFF','#E9ED18','#F9AB50','#DC3E30'],\r\n // \t\t\t// env:'zww',\r\n // \t\t\tview,\r\n // \t\t\tmapContainer: 'map-container',\r\n // \t\t\tfontStyle:{\r\n // \t\t\t\tcolor:'white',\r\n // \t\t\t\tfont:8\r\n // \t\t\t}\r\n // \t\t});\r\n\r\n // \t\t// 地图点击获取属性值\r\n // \t\tview.on('click',(event)=>{\r\n // \t\t\tmapClickEvent(event,view).then(res=>{\r\n // \t\t\t\tthis.$store.commit('screenViewStore/setDq', res.name)\r\n // \t\t\t})\r\n // \t\t})\r\n // \t\tview.map.add(fiveLayerInst);\r\n // \t\tthis.viewLayer = view\r\n // \t\tthis.layer = fiveLayerInst\r\n // \t\tlet that = this;\r\n // \t\tsetTimeout(()=>{\r\n // \t\t\tlet mapBox = document.getElementById('map-container')\r\n // \t\t\tfor(let i=0;i{\r\n // \t\t\t\t\t\t\tlet initColor = ['#0EE717','#1EBBFF','#E9ED18','#F9AB50','#DC3E30']\r\n // \t\t\t\t\t\t\tif(parseInt(item.code) === 500200&&[...mapBox.children[i].classList].indexOf('ljLabel') !== -1){\r\n // \t\t\t\t\t\t\t\tmapBox.children[i].style.background = initColor[parseInt(item.value)-1]\r\n // \t\t\t\t\t\t\t}\r\n // \t\t\t\t\t\t\tif(parseInt(item.code) === 500300&&[...mapBox.children[i].classList].indexOf('gxLabel') !== -1){\r\n // \t\t\t\t\t\t\t\tmapBox.children[i].style.background = initColor[parseInt(item.value)-1]\r\n // \t\t\t\t\t\t\t}\r\n // \t\t\t\t\t\t})\r\n // \t\t\t\t\t}\r\n // \t\t\t\t}\r\n // \t\t\t}\r\n // \t\t\t// mapBox.addEventListener('click', function(event) {\r\n // \t\t\t// \t// 检查点击的目标元素是否为所需的子元素\r\n // \t\t\t// \tif (event.target.classList.contains('ljLabel')) {\r\n // \t\t\t// \t\t// 在这里处理点击事件的逻辑\r\n // \t\t\t// \t\tthat.$store.commit('screenViewStore/setDq', '两江新区')\r\n // \t\t\t// \t}\r\n // \t\t\t// \tif (event.target.classList.contains('gxLabel')) {\r\n // \t\t\t// \t\t// 在这里处理点击事件的逻辑\r\n // \t\t\t// \t\tthat.$store.commit('screenViewStore/setDq', '高新区')\r\n // \t\t\t// \t}\r\n // \t\t\t// });\r\n // \t\t},200)\r\n\r\n // \t}\r\n // }\r\n }\r\n}\r\n",null]}