1.增加地块价值分析页面

src/components/OneMap/BasicMap.vue

@@ -9,7 +9,7 @@
     </div>
     <div style="flex: 1">
       <!-- 原来的，F11不能自适应 -->
-<!--      <div ref="basicMap" class="basicMap" id="basicMap" :style="{ height: height }">-->
+      <!--      <div ref="basicMap" class="basicMap" id="basicMap" :style="{ height: height }">-->
       <div ref="basicMap" class="basicMap" id="basicMap" :style="{ height: '100%' }">
         <tool-bar v-model="isToolBar" ref="toolBar" :tools="mapTools" :v-if="toolsLoaded"></tool-bar>
         <locate-by-geoinfo ref="locateByGeoinfo"></locate-by-geoinfo>
@@ -18,7 +18,7 @@
       </div>
     </div>
     <div v-if="analysisResult" id="right-sild" @click="handleDrawer" :style="drawerStyle">
-      <p class="ttitle"><br/>分<br/>析<br/>结<br/>果</p>
+      <p class="ttitle"><br />分<br />析<br />结<br />果</p>
     </div>
     <!--显示弹窗-->
     <div>
@@ -56,9 +56,7 @@ import IdentifyParameters from '@arcgis/core/rest/support/IdentifyParameters'
 import BaseMap from './widgets/BaseMap'
 import LocateByGeoinfo from './widgets/LocateByGeoinfo'
 import ToolBar from './widgets/ToolBar'
-import {
-  getAction
-} from '../../api/manage'
+import { getAction } from '../../api/manage'
 import TileInfo from '@arcgis/core/layers/support/TileInfo'
 import WebTileLayer from '@arcgis/core/layers/WebTileLayer'
 import QueryInfo from '@comp/OneMap/widgets/QueryInfo'
@@ -69,7 +67,7 @@ export default {
     ToolBar,
     BaseMap,
     LocateByGeoinfo,
-    QueryInfo,
+    QueryInfo
   },
   data() {
     return {
@@ -123,20 +121,20 @@ export default {
         权属起始时间: '',
         权属结束时间: '',
         担保: '',
-        土地使用现状: '',
-      },
+        土地使用现状: ''
+      }
     }
   },
   props: {
     resConfigUrl: {
-      type: String,
+      type: String
     },
     toolsConfigUrl: {
-      type: String,
+      type: String
     },
     topicId: {
       type: String,
-      default: 'null',
+      default: 'null'
     },
     height: {
       type: String,
@@ -144,69 +142,65 @@ export default {
         let calcHeight = window.document.documentElement.clientHeight - 130
         let m_height = calcHeight.toString() + 'px'
         return m_height
-      },
+      }
     },
     center: {
       type: Array,
-      default: function () {
+      default: function() {
         return [118.9943, 36.4939]
-      },
+      }
     },
     extent: {
       type: Array,
-      default: function () {
+      default: function() {
         /* return [118.109760, 35.019916, 118.475084, 35.388584];*/
         /*  return [118.109760, 35.019916, 118.475084, 35.388584];*/
         return [114.5997, 34.5248, 123.2469, 38.5253]
-      },
+      }
     },
     wkid: {
       type: Number,
-      default: 102100,
+      default: 102100
     },
     zoom: {
       type: Number,
-      default: 8,
+      default: 8
     },
     isToolBar: {
       type: Boolean,
-      default: true,
-    },
+      default: true
+    }
   },
   provide() {
     return {
-      basicMap: this,
+      basicMap: this
     }
   },
   created() {
     this.spatialReference = new SpatialReference({
-      wkid: this.wkid,
+      wkid: this.wkid
     })
     this.initExtent = new Extent(this.extent[0], this.extent[1], this.extent[2], this.extent[3])
     this.popupTemplate = {
       overwriteActions: true,
       outFields: ['*'],
-      title: ({
-                graphic: {
-                  attributes,
-                  layer
-                }
-              }) => {
+      title: ({ graphic: { attributes, layer } }) => {
         const dkmc = layer.title
         return `<div>${dkmc || ''}</div>`
       },
       content: this.selectChange,
-      actions: [{
-        title: '详情',
-        id: 'showDKDetail',
-        className: 'esri-icon-zoom-in-magnifying-glass',
-      },
+      actions: [
+        {
+          title: '详情',
+          id: 'showDKDetail',
+          className: 'esri-icon-zoom-in-magnifying-glass'
+        },
         {
           title: '全景',
           id: 'showAll',
-          className: 'esri-icon-globe',
-        },
-      ],
+          className: 'esri-icon-globe'
+        }
+      ]
     }
     this.baseRasterLayerUrl = window._CONFIG['mapBaseLayerURL']
   },
@@ -224,12 +218,8 @@ export default {
   methods: {
     //获取专题配置
     async getTopicConfig() {
-      let {
-        result,
-        success,
-        message
-      } = await getAction('topicManage/topicsConfig/list', {
-        topicid: this.topicId,
+      let { result, success, message } = await getAction('topicManage/topicsConfig/list', {
+        topicid: this.topicId
       })
       if (success) {
         this.loadMapConfig(result.records[0].analysistypes)
@@ -238,13 +228,9 @@ export default {
       }
     },
     async loadMapConfig(analysistypes) {
-      let {
-        result,
-        success,
-        message
-      } = await getAction(this.resConfigUrl, {
+      let { result, success, message } = await getAction(this.resConfigUrl, {
         username: store.getters.userInfo.username,
-        topicId: this.topicId,
+        topicId: this.topicId
       })
       if (success) {
         this.layerList = JSON.parse(JSON.stringify(result))
@@ -252,12 +238,12 @@ export default {
         let self = this
         this.list.push(this.layerList, this.layerList2)
         if (this.layerList && this.layerList.length !== 0) {
-          this.layerList.forEach((layerItem) => {
+          this.layerList.forEach(layerItem => {
             if (layerItem.layers) {
               //累计记录需要加载的图层数量，用以之后判断图层是否全部加载完毕
               self.layerNum += layerItem.layers.length
               //记录所有的 图层配置，
-              layerItem.layers.forEach((layerConfig) => {
+              layerItem.layers.forEach(layerConfig => {
                 if (layerConfig) {
                   if (analysistypes) {
                     if (analysistypes.includes(layerConfig.name)) {
@@ -281,13 +267,9 @@ export default {
       }
     },
     async loadMapTools() {
-      let {
-        result,
-        success,
-        message
-      } = await getAction(this.toolsConfigUrl, {
+      let { result, success, message } = await getAction(this.toolsConfigUrl, {
         username: store.getters.userInfo.username,
-        topicId: this.topicId,
+        topicId: this.topicId
       })
       if (success) {
         this.mapTools.push(...result)
@@ -313,7 +295,7 @@ export default {
       // });
       //   })
       this.esriMap = new Map({
-        slider: true, //开启放大缩小
+        slider: true //开启放大缩小
 
         // basemap: basemap
       })
@@ -321,26 +303,25 @@ export default {
         container: this.$refs.basicMap,
         map: this.esriMap,
         ui: {
-          components: [],
+          components: []
         },
         extent: this.initExtent,
         popup: {
-          defaultPopupTemplateEnabled: true, // popup will be enabled on the wfslayer
-        },
+          defaultPopupTemplateEnabled: true // popup will be enabled on the wfslayer
+        }
       })
       this.mapView.constraints = {
         minZoom: 7,
-        maxZoom: 18,
+        maxZoom: 18
       }
 
       // this.mapView.ui.remove('attribution');        //移除底部版权信息状态栏
       // this.mapView.ui.components = [];
       this.mapView.when(
         () => {
-
           this.initWeights()
         },
-        (error) => {
+        error => {
           this.$message.error(error.message)
         }
       )
@@ -359,20 +340,20 @@ export default {
         container: this.$refs.basicMap2,
         map: this.esriMap2,
         ui: {
-          components: [],
+          components: []
         },
-        extent: this.mapView.extent,
+        extent: this.mapView.extent
       })
       this.mapView.when(
         () => {
           this.loadLayers(this.layerList2, this.esriMap2)
         },
-        function (error) {
+        function(error) {
           this.$message.error(error.message)
         }
       )
       let views = [this.mapView, this.mapView2]
-      views.forEach((view) => {
+      views.forEach(view => {
         // 定义一个范围变量
         let fullextent = null
         // 设置鼠标滚轮事件
@@ -388,11 +369,11 @@ export default {
           }, 1)
         })*/
         // 设置鼠标拖拽事件
-        view.on('drag', (e) => {
+        view.on('drag', e => {
           // 获取操作图层的范围
           fullextent = view.extent
           // 遍历所有视图来设置这个范围
-          views.forEach((nview) => {
+          views.forEach(nview => {
             nview.extent = fullextent
           })
         })
@@ -407,7 +388,7 @@ export default {
     },
     loadLayers(list, map) {
       if (list && list.length !== 0) {
-        list.forEach((layerItem) => {
+        list.forEach(layerItem => {
           if (layerItem.layers) {
             this.loadLayers(layerItem.layers, map)
           } else {
@@ -417,7 +398,7 @@ export default {
       }
     },
     // 载入图层到layers
-    _loadLayer: function (layerItem, esriMap) {
+    _loadLayer: function(layerItem, esriMap) {
       let layer = null
       let layer_opacity = null
       switch (layerItem.servicetype) {
@@ -425,18 +406,20 @@ export default {
           layer = new MapImageLayer({
             id: layerItem.id,
             title: layerItem.alias,
-            url: layerItem.url,
+            url: layerItem.url
           })
           let layerInfo = {
             title: layerItem.alias,
-            layer: layer,
+            layer: layer
           }
           if (layerItem.sublayerid != undefined && layerItem.sublayerid != null) {
-            layer.sublayers = [{
-              id: layerItem.sublayerid,
-              visible: layerItem.visible,
-              labelsVisible: layerItem.labelsvisible,
-            },]
+            layer.sublayers = [
+              {
+                id: layerItem.sublayerid,
+                visible: layerItem.visible,
+                labelsVisible: layerItem.labelsvisible
+              }
+            ]
             if (layerItem.visible && layerItem.queryable) {
               this.v_layerIds.push(layerItem.sublayerid)
             }
@@ -452,7 +435,7 @@ export default {
             id: layerItem.id,
             title: layerItem.alias,
             url: layerItem.url,
-            visible: layerItem.visible,
+            visible: layerItem.visible
           })
           break
         }
@@ -462,30 +445,13 @@ export default {
             title: layerItem.alias,
             url: layerItem.url,
             popupTemplate: this.popupTemplate,
-            visible: layerItem.visible,
+            visible: layerItem.visible
           })
           break
         }
-        /*sugb 20240530 瓦片服务*/
-        case 'WMTSLayer': {
-            this.webTiledLayerId.push(layerItem.id)
-            layer = new WMTSLayer({
-              id: layerItem.id,
-              url: layerItem.url,               //WMTS服务的URL地址
-              layerIdentifier: layerItem.name,  //属性用于指定你要加载的WMTS图层的标识符（即图层名称）
-              title: layerItem.alias,           //描述
-              style: layerItem.style,           //图层的样式。通常为default
-              format: 'image/png',              //瓦片图像的格式,可默认
-              activeLayer: {
-                id: layerItem.name, //图层名称
-                tileMatrixSetId: 'EPSG:4326', //瓦片矩阵集的标识符（通常为坐标参考系统的EPSG代码）
-              },
-              visible: layerItem.visible, //是否显示
-            })
-            break
-        }
         /*sugb 20240530 wms服务*/
         case 'WFSLayer': {
+          console.log(layerItem)
           // 更新要素样式
           layer = new WMSLayer({
             id: layerItem.id,
@@ -493,10 +459,12 @@ export default {
             title: layerItem.alias,
             name: layerItem.name,
             style: layerItem.style,
-            sublayers: [{
-              name: layerItem.name
-            }],
-            visible: layerItem.visible,
+            sublayers: [
+              {
+                name: layerItem.name
+              }
+            ],
+            visible: layerItem.visible
           })
           layer_opacity = new WFSLayer({
             id: layerItem.id,
@@ -508,29 +476,45 @@ export default {
             popupTemplate: {
               overwriteActions: true,
               outFields: ['*'],
-              title: ({
-                        graphic: {
-                          attributes,
-                          layer
-                        }
-                      }) => {
+              title: ({ graphic: { attributes, layer } }) => {
                 const dkmc = layer.title
                 return `<div>${dkmc || ''}</div>`
               },
               content: this.selectChange,
-              actions: [{
-                title: '详情',
-                id: 'showDKDetail',
-                className: 'esri-icon-zoom-in-magnifying-glass',
-              },
+              actions: [
+                {
+                  title: '详情',
+                  id: 'showDKDetail',
+                  className: 'esri-icon-zoom-in-magnifying-glass'
+                },
                 {
                   title: '全景',
                   id: 'showAll',
-                  className: 'esri-icon-globe',
-                },
-              ],
+                  className: 'esri-icon-globe'
+                }
+              ]
             },
-            visible: layerItem.visible,
+            visible: layerItem.visible
+          })
+          break
+        }
+        /*sugb 20240530 瓦片服务*/
+        case 'WMTSLayer': {
+          console.log('加载WMTS')
+          console.log(layerItem)
+          this.webTiledLayerId.push(layerItem.id)
+          layer = new WMTSLayer({
+            id: layerItem.id,
+            url: layerItem.url, //WMTS服务的URL地址
+            layerIdentifier: layerItem.name, //属性用于指定你要加载的WMTS图层的标识符（即图层名称）
+            title: layerItem.alias, //描述
+            style: layerItem.style, //图层的样式。通常为default
+            format: 'image/png', //瓦片图像的格式,可默认
+            activeLayer: {
+              id: layerItem.name, //图层名称
+              tileMatrixSetId: 'EPSG:4326' //瓦片矩阵集的标识符（通常为坐标参考系统的EPSG代码）
+            },
+            visible: layerItem.visible //是否显示
           })
           break
         }
@@ -538,7 +522,7 @@ export default {
           break
       }
       //所有的图层都加载完成事件
-      layer.on('layerview-create', (evt) => {
+      layer.on('layerview-create', evt => {
         this.layerCount++
         if (this.layerNum == this.layerCount) {
           this.$emit('layer-loadAll', true)
@@ -547,6 +531,7 @@ export default {
       })
       if (parseInt(layerItem.zIndex)) {
         esriMap.add(layer, parseInt(layerItem.zIndex))
+        esriMap.add(layer_opacity)
       } else {
         esriMap.add(layer)
         esriMap.add(layer_opacity)
@@ -554,57 +539,60 @@ export default {
     },
     initBaseLayer() {
       let baseRasterLayer = new WMTSLayer({
-        url: this.baseRasterLayerUrl,
+        url: this.baseRasterLayerUrl
       })
       let basemap = new Basemap({
         baseLayers: [baseRasterLayer],
         spatialReference: new SpatialReference({
-          wkid: 102100,
-        }),
+          wkid: 102100
+        })
       })
       this.esriMap.basemap = basemap
       this.esriMap2.basemap = basemap
     },
     initGraphicsLayers() {
       this.draw_GraphicsLayer = new GraphicsLayer({
-        title: '绘图专用图层',
+        title: '绘图专用图层'
       })
       this.esriMap.add(this.draw_GraphicsLayer, 100)
       this.layerSketch = new GraphicsLayer({
-        title: '编辑图斑专用图层',
+        title: '编辑图斑专用图层'
       })
       this.esriMap.add(this.layerSketch, 100)
       this.analysis_GraphicsLayer = new GraphicsLayer({
         title: '分析专用图层',
-        id: 'analysis',
+        id: 'analysis'
       })
       this.esriMap.add(this.analysis_GraphicsLayer, 100)
       this.analysis_Drew_GraphicsLayer = new GraphicsLayer({
         title: '分析绘制专用图层',
-        id: 'analysisDraw',
+        id: 'analysisDraw'
       })
       this.esriMap.add(this.analysis_Drew_GraphicsLayer, 101)
       this.path_GraphicsLayer = new GraphicsLayer({
         title: '巡回轨迹专用图层',
-        id: 'path',
+        id: 'path'
       })
       this.esriMap.add(this.path_GraphicsLayer, 100)
       this.locate_GraphicsLayer = new GraphicsLayer({
-        title: '定位专用图层',
+        title: '定位专用图层'
       })
       this.esriMap.add(this.locate_GraphicsLayer, 101)
     },
+    // 加载弹出框
+    initPopup() {
+      let datas = this.getPopupData()
+    },
     initWeights() {
       // this.mapView.ui.remove('attribution');        //移除底部版权信息状态栏
       this.mapView.ui.components = []
       let zoom = new Zoom({
-        view: this.mapView,
+        view: this.mapView
       })
       this.mapView.ui.add(zoom, 'top-left')
       zoom.when(
-        (evt) => {
-        },
-        (err) => {
+        evt => {},
+        err => {
           if (this.routeList.indexOf(this.$route.name) != -1) {
             location.reload(true)
           }
@@ -614,13 +602,13 @@ export default {
       let homeBtn = new Home({
         view: this.mapView,
         viewpoint: new Viewpoint({
-          targetGeometry: this.initExtent,
-        }),
+          targetGeometry: this.initExtent
+        })
       })
       this.mapView.ui.add(homeBtn, 'top-left')
 
       let compass = new Compass({
-        view: this.mapView,
+        view: this.mapView
       })
       this.mapView.ui.add(compass, 'top-left')
 
@@ -640,17 +628,17 @@ export default {
       let scaleBar = new ScaleBar({
         view: this.mapView,
         unit: 'metric', //Possible Values:"non-metric"|"metric"|"dual"
-        style: 'line', //Possible Values:"ruler"|"line"
+        style: 'line' //Possible Values:"ruler"|"line"
       })
       this.mapView.ui.add(scaleBar, 'bottom-left')
     },
     initMapEvents() {
-      this.mapView.on('pointer-move', (evt) => {
+      this.mapView.on('pointer-move', evt => {
         let point = this.mapView.toMap(evt)
         this.currentCoords = point.longitude.toFixed(4) + ',' + point.latitude.toFixed(4)
       })
 
-      this.mapView.on('click', (evt) => {
+      this.mapView.on('click', evt => {
         if (this.$refs.toolBar.enableIdentify) {
           this.$refs.toolBar.doIdentify(evt)
         }
@@ -661,11 +649,9 @@ export default {
     initActiveViewEvents() {
       if (this.mapView) {
         // PopupViewModel的触发动作被触发，然后检查动作id
-        this.mapView.popup.on('trigger-action', ({action}) => {
+        this.mapView.popup.on('trigger-action', ({ action }) => {
           const actionId = action.id
-          let {
-            attributes
-          } = this.mapView.popup.viewModel.selectedFeature
+          let { attributes } = this.mapView.popup.viewModel.selectedFeature
           // 点击"地块详情"
           if (actionId === 'showDKDetail' && this.resData.sysOrgCode != null) {
             //获取弹出的popup所归属的graphic的attributes
@@ -687,13 +673,13 @@ export default {
     },
     /*点击地图时弹出信息*/
     selectChange(feature) {
-      this.isVr=false;
+      this.isVr = false
       //console.log('selectChange'+JSON.stringify(feature))
       let content = document.createElement('div')
       this.resData = []
       if (feature.graphic.attributes.DKBH != ' ') {
         return new Promise((resolve, reject) => {
-          getAction('/qcsb/qcSsgqzysytdqk/queryBydkbh', {DKBH: feature.graphic.attributes.DKBH}).then((res) => {
+          getAction('/qcsb/qcSsgqzysytdqk/queryBydkbh', { DKBH: feature.graphic.attributes.DKBH }).then(res => {
             if (res.code == 200) {
               this.resData = res.result
               resolve(this.resData)
@@ -701,8 +687,8 @@ export default {
               resolve(this.resData)
             }
           })
-        }).then((res) => {
-          console.log("获取的地块信息")
+        }).then(res => {
+          console.log('获取的地块信息')
           // console.log(JSON.stringify(this.resData))
           if (res.sysOrgCode.slice(0, 3) == 'A04') {
             var dwmc = res.createBy
@@ -710,12 +696,13 @@ export default {
             var sjyd = res.sjytText
             var sjzytdmj = res.sjzytdmj
             var sjsyjzmj = res.sjsyjzmj
-            content.innerHTML =
-              `<div><span style="font-weight: bold;">企业名称：</span> <span>${dwmc}<span/></div>
-                             <div><span style="font-weight: bold;">地块名称：</span> <span>${dkmc}</span></div>
-                             <div><span style="font-weight: bold;">实际用地：</span> <span>${sjyd}</span></div>
-                             <div class="ant-tag" style="background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 " >实际占用土地面积：${sjzytdmj || 0}²</div>
-                             <div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >实际使用建筑面积：${sjsyjzmj || 0}²</div>`
+            content.innerHTML = `<div><span style='font-weight: bold;'>企业名称：</span> <span>${dwmc}<span/></div>
+                             <div><span style='font-weight: bold;'>地块名称：</span> <span>${dkmc}</span></div>
+                             <div><span style='font-weight: bold;'>实际用地：</span> <span>${sjyd}</span></div>
+                             <div class='ant-tag' style='background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 ' >实际占用土地面积：${sjzytdmj ||
+                               0}²</div>
+                             <div class='ant-tag' style='background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 ' >实际使用建筑面积：${sjsyjzmj ||
+                               0}²</div>`
             return content
           } else {
             var dwmc = res.createBy
@@ -724,21 +711,20 @@ export default {
             var sjzytdmj = res.sjzytdmj
             var sjsyjzmj = res.sjsyjzmj
             let content = document.createElement('div')
-            content.innerHTML =
-              `<div><span style="font-weight: bold;">企业名称：</span> <span>${dwmc}<span/></div>
-                             <div><span style="font-weight: bold;">地块名称：</span> <span>${dkmc}</span></div>
-                             <div><span style="font-weight: bold;">实际用地：</span> <span>${sjyd}</span></div>
-                             <div class="ant-tag" style="background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 " >实际占用土地面积：${sjzytdmj || 0}²</div>
-                             <div class="ant-tag" style="background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 " >实际使用建筑面积：${sjsyjzmj || 0}²</div>`
+            content.innerHTML = `<div><span style='font-weight: bold;'>企业名称：</span> <span>${dwmc}<span/></div>
+                             <div><span style='font-weight: bold;'>地块名称：</span> <span>${dkmc}</span></div>
+                             <div><span style='font-weight: bold;'>实际用地：</span> <span>${sjyd}</span></div>
+                             <div class='ant-tag' style='background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 ' >实际占用土地面积：${sjzytdmj ||
+                               0}²</div>
+                             <div class='ant-tag' style='background-color: #feeeeb ;color: #d57a55;border:1px solid #d57a55 ' >实际使用建筑面积：${sjsyjzmj ||
+                               0}²</div>`
             return content
           }
         })
       } else {
-        return (content.innerHTML =
-            `<div><span style="font-weight: bold;">企业名称：</span> <span>${feature.graphic.attributes.DWMC}<span/></div>
-             <div><span style="font-weight: bold;">证书编号：</span> <span>${feature.graphic.attributes.ZSBH}</span></div>
-             <div class="ant-tag" style="background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 " >地块信息未上报</div>`
-        )
+        return (content.innerHTML = `<div><span style='font-weight: bold;'>企业名称：</span> <span>${feature.graphic.attributes.DWMC}<span/></div>
+             <div><span style='font-weight: bold;'>证书编号：</span> <span>${feature.graphic.attributes.ZSBH}</span></div>
+             <div class='ant-tag' style='background-color: #feeeeb;margin-top: 5px;color: #d57a55;border:1px solid #d57a55 ' >地块信息未上报</div>`)
         // this.$info({
         //   title: '说明',
         //   content: (<div><p>{地块信息不存在}</p></div>),
@@ -758,7 +744,7 @@ export default {
     },
     //复选框处理方法
     changeLayerVisible(layerConfig, visible, esriMap) {
-      console.log("复选框处理事件")
+      console.log('复选框处理事件')
       console.log(JSON.stringify(layerConfig))
       console.log(JSON.stringify(visible))
       if (layerConfig != null && layerConfig != '' && JSON.stringify(layerConfig) !== '{}') {
@@ -799,9 +785,9 @@ export default {
         //根据图层id，更改资源目录列表中图层的表示状态
         let layerList = this.list[0]
         if (layerList && layerList.length !== 0) {
-          layerList.forEach((layerItem) => {
+          layerList.forEach(layerItem => {
             if (layerItem.layers) {
-              layerItem.layers.forEach((layerSubItem) => {
+              layerItem.layers.forEach(layerSubItem => {
                 if (layerSubItem.id === layerConfig.id) {
                   layerSubItem.visible = visible
                 }
@@ -813,7 +799,7 @@ export default {
     },
     changeLayerVisibleByLayerName(layerName, visible) {
       let layerConfig = {}
-      this.layerConfigs.map((item) => {
+      this.layerConfigs.map(item => {
         if (item.name == layerName) {
           layerConfig = item
         }
@@ -822,7 +808,7 @@ export default {
     },
     changeLayerVisibleByTableName(tableName, visible) {
       let layerConfig = {}
-      this.layerConfigs.map((item) => {
+      this.layerConfigs.map(item => {
         if (item.tablename == tableName) {
           layerConfig = item
         }
@@ -852,8 +838,8 @@ export default {
       }else {
         this.drawerStyle="right:0"
       }*/
-    },
-  },
+    }
+  }
 }
 </script>
 

src/components/OneMap/widgets/QueryInfo.vue

@@ -1,95 +1,106 @@
 <template>
-  <div style='z-index: 999' v-if='value && data.length>0' class='detail'
-       v-drag='`.detail .ant-card-head`'>
-    <a-card :title='title'>
-      <a-icon slot='extra' class='panelClose' type='close' @click="$emit('input',false)" />
-      <div class="descriptions-container">
-        <div class="separator">
-          <h4><b>土地基本信息</b></h4>
-        </div>
-        <a-descriptions :column="2" :bordered="true" class="description-group">
-          <a-descriptions-item v-for='(item) in list_baseinfo' :key='item.field' :label='item.label'>
-            {{ item.val }}
-          </a-descriptions-item>
-        </a-descriptions>
+  <div style="z-index: 999" v-if="value && data.length > 0" class="detail" v-drag="`.detail .ant-card-head`">
+    <a-card :title="title">
+      <a-icon slot="extra" class="panelClose" type="close" @click="$emit('input', false)" />
+      <a-tabs v-model:activeKey="activeKey" @change="poupKey">
+        <a-tab-pane key="1" tab="地块基本信息">
+          <div class="descriptions-container">
+            <div class="separator">
+              <h4><b>土地基本信息</b></h4>
+            </div>
+            <a-descriptions :column="2" :bordered="true" class="description-group">
+              <a-descriptions-item v-for="item in list_baseinfo" :key="item.field" :label="item.label">
+                {{ item.val }}
+              </a-descriptions-item>
+            </a-descriptions>
 
-        <div class="separator">
-          <h4><b>土地权证信息</b></h4>
-        </div>
-        <a-descriptions :column="2" :bordered="true" class="description-group">
-          <a-descriptions-item v-for='(item) in list_tdqz' :key='item.field' :label='item.label'>
-            {{ item.val }}
-          </a-descriptions-item>
-        </a-descriptions>
+            <div class="separator">
+              <h4><b>土地权证信息</b></h4>
+            </div>
+            <a-descriptions :column="2" :bordered="true" class="description-group">
+              <a-descriptions-item v-for="item in list_tdqz" :key="item.field" :label="item.label">
+                {{ item.val }}
+              </a-descriptions-item>
+            </a-descriptions>
 
-        <div class="separator">
-          <h4><b>土地使用信息</b></h4>
-        </div>
-        <a-descriptions :column="2" :bordered="true" class="description-group">
-          <a-descriptions-item v-for='(item) in list_tdsy' :key='item.field' :label='item.label'>
-            {{ item.val }}
-          </a-descriptions-item>
-        </a-descriptions>
+            <div class="separator">
+              <h4><b>土地使用信息</b></h4>
+            </div>
+            <a-descriptions :column="2" :bordered="true" class="description-group">
+              <a-descriptions-item v-for="item in list_tdsy" :key="item.field" :label="item.label">
+                {{ item.val }}
+              </a-descriptions-item>
+            </a-descriptions>
 
-        <div class="separator">
-          <h4><b>土地使用情况及盘活利用信息</b></h4>
-        </div>
-        <a-descriptions :column="2" :bordered="true" class="description-group">
-          <a-descriptions-item v-for='(item) in list_tdph' :key='item.field' :label='item.label'>
-            {{ item.val }}
-          </a-descriptions-item>
-        </a-descriptions>
+            <div class="separator">
+              <h4><b>土地使用情况及盘活利用信息</b></h4>
+            </div>
+            <a-descriptions :column="2" :bordered="true" class="description-group">
+              <a-descriptions-item v-for="item in list_tdph" :key="item.field" :label="item.label">
+                {{ item.val }}
+              </a-descriptions-item>
+            </a-descriptions>
 
-        <div class="separator">
-          <h4><b>土地价值信息</b></h4>
-        </div>
-        <a-descriptions :column="2" :bordered="true" class="description-group">
-          <a-descriptions-item v-for='(item) in list_tdjz' :key='item.field' :label='item.label'>
-            {{ item.val }}
-          </a-descriptions-item>
-        </a-descriptions>
+            <div class="separator">
+              <h4><b>土地价值信息</b></h4>
+            </div>
+            <a-descriptions :column="2" :bordered="true" class="description-group">
+              <a-descriptions-item v-for="item in list_tdjz" :key="item.field" :label="item.label">
+                {{ item.val }}
+              </a-descriptions-item>
+            </a-descriptions>
 
-        <div class="separator">
-          <h4><b>经营信息</b></h4>
-        </div>
-        <a-descriptions :column="2" :bordered="true" class="description-group">
-          <a-descriptions-item v-for='(item) in list_tdjy' :key='item.field' :label='item.label'>
-            {{ item.val }}
-          </a-descriptions-item>
-        </a-descriptions>
+            <div class="separator">
+              <h4><b>经营信息</b></h4>
+            </div>
+            <a-descriptions :column="2" :bordered="true" class="description-group">
+              <a-descriptions-item v-for="item in list_tdjy" :key="item.field" :label="item.label">
+                {{ item.val }}
+              </a-descriptions-item>
+            </a-descriptions>
 
-        <div class="separator">
-          <h4><b>审核信息</b></h4>
-        </div>
-        <a-descriptions :column="2" :bordered="true" class="description-group">
-          <a-descriptions-item v-for='(item) in list_tdsh' :key='item.field' :label='item.label'>
-            {{ item.val }}
-          </a-descriptions-item>
-        </a-descriptions>
-        <div class="separator">
-          <h4><b>照片信息</b></h4>
-        </div>
-        <div>
-          <ImagesView :image-list='images'></ImagesView>
-        </div>
-<!--        <a-descriptions :column="1" :bordered="true" class="description-group">-->
-<!--          <a-descriptions-item :label=image>-->
-<!--            <ImagesView :image-list='images'></ImagesView>-->
-<!--          </a-descriptions-item>-->
-<!--        </a-descriptions>-->
-<!--        <div style="height: 10px;width: 100%;background-color: #ABDBF3" >-->
-
-<!--        </div>-->
-      </div>
-
-<!--      <a-descriptions bordered :column='2'>-->
-<!--        <a-descriptions-item v-for='(item,index) in data' :key='item.field' :label='item.field'>-->
-<!--          {{ item.val }}-->
-<!--        </a-descriptions-item>-->
-<!--        <a-descriptions-item :label=image>-->
-<!--          <ImagesView :image-list='images'></ImagesView>-->
-<!--        </a-descriptions-item>-->
-<!--      </a-descriptions>-->
+            <div class="separator">
+              <h4><b>审核信息</b></h4>
+            </div>
+            <a-descriptions :column="2" :bordered="true" class="description-group">
+              <a-descriptions-item v-for="item in list_tdsh" :key="item.field" :label="item.label">
+                {{ item.val }}
+              </a-descriptions-item>
+            </a-descriptions>
+            <div class="separator">
+              <h4><b>照片信息</b></h4>
+            </div>
+            <div>
+              <ImagesView :image-list="images"></ImagesView>
+            </div>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="2" tab="地块价值信息" force-render>
+          <a-row>
+            <a-col :span="12">
+              <a-card class="pid">
+                <PieData ref="zddata" :resultData="this.resData" :titleText="titleText" @visible="true"></PieData>
+              </a-card>
+            </a-col>
+            <a-col :span="12">
+              <a-card class="pid">
+                <PieDataJz ref="datajz" :resDatas="this.resDatas" :titleTexts="titleTexts" @visible="true"></PieDataJz>
+              </a-card>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <a-table :columns="columns" :data-source="tabdata" bordered>
+                <template #title>
+                  <div class="custom-title">
+                    地块类型明细
+                  </div>
+                </template>
+              </a-table>
+            </a-col>
+          </a-row>
+        </a-tab-pane>
+      </a-tabs>
     </a-card>
   </div>
 </template>
@@ -97,10 +108,12 @@
 <script>
 import ViewImages from '@comp/jeecg/ViewImages'
 import ImagesView from '@comp/jeecg/ImagesView'
+import PieData from '@views/tj/compoent/JzData'
+import PieDataJz from '@views/tj/compoent/JzDataJz'
 
 export default {
   name: 'QueryInfo',
-  components: { ViewImages, ImagesView },
+  components: { ViewImages, ImagesView, PieData, PieDataJz },
   props: {
     value: {
       type: Boolean,
@@ -109,12 +122,52 @@ export default {
     },
     title: {
       type: String,
-      default: '详情'
+      default: '地块信息'
     }
   },
   data() {
     return {
+      titleTexts: '地块类型价值占比',
+      titleText: '地块类型面积占比',
+      activeKey: '1',
+      resData: [],
+      resDatas: [],
       data: [],
+      tabdata: [],
+      columns: [
+        {
+          title: '区划名称',
+          dataIndex: 'xjxzqhmc'
+        },
+        {
+          title: '地类名称',
+          dataIndex: 'dlmc'
+        },
+        {
+          title: '面积(亩)',
+          dataIndex: 'mj'
+        },
+        {
+          title: '均价(元)',
+          dataIndex: 'pjjg',
+          width: 160
+        },
+        {
+          title: '均价合计(元)',
+          dataIndex: 'zjg',
+          width: 160
+        },
+        {
+          title: '价格范围(元)',
+          dataIndex: 'jgqj',
+          width: 200
+        },
+        {
+          title: '价值区间(元)',
+          dataIndex: 'jzfw',
+          width: 200
+        }
+      ],
       image: '照片',
       images: [],
       leftStyle: '',
@@ -124,25 +177,34 @@ export default {
       list_baseinfo: [],
       list_tdqz: [],
       list_tdsy: [],
-      list_tdph:[],
-      list_tdjz:[],
-      list_tdjy:[],
-      list_tdsh:[],
+      list_tdph: [],
+      list_tdjz: [],
+      list_tdjy: [],
+      list_tdsh: []
     }
   },
   methods: {
+    poupKey() {
+      if (this.activeKey == '2') {
+        // console.log("面积:",this.resData)
+        // console.log("价值:",this.resDatas)
+        this.$refs.zddata.getPie()
+        this.$refs.datajz.getPie()
+      }
+    },
     handleCancel() {
       this.close()
       this.previewVisible = false
     },
     loadDetail(res) {
+      this.activeKey = '1'
       this.list_baseinfo = []
       this.list_tdqz = []
       this.list_tdsy = []
-      this.list_tdph=[]
-      this.list_tdjz=[]
-      this.list_tdjy=[]
-      this.list_tdsh=[]
+      this.list_tdph = []
+      this.list_tdjz = []
+      this.list_tdjy = []
+      this.list_tdsh = []
       var baseinfo = {
         createBy: '录入主体',
         dk: '宗地名称',
@@ -154,9 +216,9 @@ export default {
         gjczqyName: '国家出资企业',
         xzqh: '行政区划',
         zlwz: '详细地址',
-        zscyqk: '产权证持有情况',
+        zscyqk: '产权证持有情况'
         // otherZscyqk: '其他权证持有情况'
-      };
+      }
       var tdqz = {
         wjlx: '文件类型',
         wjbh: '产权证号',
@@ -165,9 +227,9 @@ export default {
         qzpzsymj: '证载面积',
         pzytText: '批准用途',
         // otherPzyt: '其它证载(批准)用途',
-        zfghyt: '政府规划用途',
+        zfghyt: '政府规划用途'
         // otherZfghyt: '其它规划用途'
-      };
+      }
       var tdsy = {
         tdsjsyr: '土地实际使用人',
         sfyz: '权证登记人和使用人一致',
@@ -185,8 +247,8 @@ export default {
         qzpzsymj: '证载建筑面积(平方米)',
         sjzytdmj: '实际占用建筑面积(平方米)',
         sjrjl: '容积率'
-      };
-      var tdph={
+      }
+      var tdph = {
         tdsyxz: '土地使用现状',
         zcsyzx: '正常使用现状',
         dbdycfqk: '土地资产的担保、抵押、查封情况',
@@ -201,28 +263,27 @@ export default {
         dlwzName: '地理区位情况',
         sfczjf: '是否存在产权纠纷',
         cqxxbcsm: '产权信息补充说明'
-      };
-      var tdjz={
+      }
+      var tdjz = {
         tdzmyz: '土地账面原值（万元）',
         tdzmjz: '土地账面净值（万元）',
         tdscjz: '土地市场价值（万元）',
-        tdzljz: '土地租赁价值（万元）',
-      };
-      var tdjy={
+        tdzljz: '土地租赁价值（万元）'
+      }
+      var tdjy = {
         yysr: '主营业务收入（万元）',
         nss: '企业所得税（万元）',
         jyrs: '就业人数',
         lirun: '净利润（万元）',
         yys: '营业税及附加（万元）',
-        bz: '备注',
-      };
-      var tdsh={
+        bz: '备注'
+      }
+      var tdsh = {
         shzt: '审核是否通过',
         shyj: '审核意见',
         shren: '审核人',
-        shrq: '审核日期',
-      };
-      console.log(res)
+        shrq: '审核日期'
+      }
       this.detail_info = res
       this.images = []
       let width = document.getElementById('basic-map').offsetWidth - 355
@@ -231,6 +292,38 @@ export default {
       if (res) {
         this.data = []
         for (let key in res) {
+          // 土地价值
+          if (key == 'ssDkjz') {
+            // 列表
+            this.tabdata = []
+            // 饼状图
+            this.resData = []
+            // 饼状图2
+            this.resDatas = []
+            //获取列表
+            let jz = res[key]
+            for (let j in jz) {
+              let item = {}
+              item.field = j
+              item.val = jz[j]
+              this.tabdata.push(item.val)
+              // 饼状图
+              if (item.val != null) {
+                let us = {}
+                let jz = {}
+                us.name = item.val['dlmc']
+                us.value = item.val['mj']
+                this.resData.push(us)
+
+                jz.name = item.val['dlmc']
+                jz.value = Number(item.val['zjg'])
+                console.log(jz)
+                if (jz.value > 0) {
+                  this.resDatas.push(jz)
+                }
+              }
+            }
+          }
           let item = {}
           if (key != 'images') {
             item.field = key
@@ -308,16 +401,18 @@ export default {
 .detail {
   display: flex;
   position: fixed;
-  width:calc(60% - 0px);
+  width: calc(60% - 0px);
   height: calc(60% - 0px);
   top: calc(22% - 0px);
   right: calc(20% - 0px);
   user-select: none;
 }
-.detail .ant-card-bordered{
+
+.detail .ant-card-bordered {
   width: calc(100% - 0px);
   height: calc(100% - 0px);
 }
+
 .detail .ant-card-body {
   padding: 4px;
   width: calc(100% - 0px);
@@ -331,34 +426,51 @@ export default {
   color: white;
 }
 
-.detail .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content {
+.detail .ant-descriptions-bordered .ant-descriptions-item-label,
+.ant-descriptions-bordered .ant-descriptions-item-content {
   padding: 9px 18px;
 }
 
-.detail th{
-  width:20%;
+.detail th {
+  width: 20%;
   text-align: right;
 }
-.detail td{
-  width:30%
+
+.detail td {
+  width: 30%;
 }
 
 .separator {
   height: 45px;
   line-height: 45px;
   text-align: center;
-  background-color: #ABDBF3;
+  background-color: #abdbf3;
   letter-spacing: 3px;
 }
+
 .descriptions-container {
   width: 100%;
   margin: auto;
 }
+
 /* 增加 label 的宽度 */
 .ant-descriptions-item-content {
   min-width: 200px;
   white-space: normal; /* 允许文本换行 */
 }
 
-</style>
+.custom-title {
+  background-color: #b0d9f2; /* 深色背景 */
+  padding: 10px 16px; /* 内边距 */
+  width: 100%; /* 确保占满整个宽度 */
+  box-sizing: border-box; /* 包含内边距和边框在元素的总宽度和高度中 */
+  display: flex; /* 使用 Flexbox 布局 */
+  align-items: center; /* 垂直居中对齐 */
+}
 
+.pid {
+  width: 100%;
+  height: 300px;
+  max-height: calc(100%);
+}
+</style>

src/components/OneMap/widgets/SpatialAnalysis.vue

@@ -1074,7 +1074,6 @@ export default {
           let type = ''
           let col = []
           let col2 = []
-          let col3 = []
           this.result = []
           let resInd = -1 //便于追加数据，需要索引
           let data = []
@@ -1143,46 +1142,46 @@ export default {
               //列信息
               this.result[resInd].columns.push(col, col2)
             }
-            data[resInd].push(item.result)
-            //遍历分组
-            if (index === result.length - length) {
+            data[resInd].push(item.result);
+            if (index == (result.length - length)) {
               data.forEach((arr, index) => {
-                let pies = []
-                let map = {}
-                let dest = []
-                //遍历分组
-                for (let i = 0; i < arr.length; i++) {
-                  let ai = arr[i]
-                  console.log('############要遍历的 result 信息(ai)#############')
-                  console.log(ai)
-                  console.log(map[ai.types])
-
-                  //判断map里记录类型存在######################
-                  dest.push({
-                    key: ai.types,
-                    types: ai.types,
-                    objectids: [ai.objectid],
-                    wkt: [ai.info],
-                    area: ai.area
-                  })
-                  let pie = { item: '示例一', count: 40 }
-                  pie.item = ai.types
-                  pie.count = parseFloat(ai.area)
-                  pies.push(pie)
-                  map[ai.types] = ai
-                  //##############################################
+                let pies = [];
+                var map = {}, dest = [];
+                for (var i = 0; i < arr.length; i++) {
+                  var ai = arr[i];
+                  if (!map[ai.types]) {
+                    dest.push({
+                      key: ai.types,
+                      types: ai.types,
+                      objectids: [ai.objectid],
+                      wkt: [ai.info],
+                      area: ai.area,
+                    });
+                    let pie = { item: '示例一', count: 40 };
+                    pie.item = ai.types;
+                    pie.count = parseFloat(ai.area);
+                    pies.push(pie);
+                    map[ai.types] = ai;
+                  } else {
+                    for (var j = 0; j < dest.length; j++) {
+                      var dj = dest[j];
+                      if (dj.types == ai.types) {
+                        dj.area = parseFloat(parseFloat(dj.area) + parseFloat(ai.area)).toFixed(4);
+                        dj.wkt.push(ai.info);
+                        dj.objectids.push(ai.objectid);
+                        pies[j].count = parseFloat(dj.area);
+                        break;
+                      }
+                    }
+                  }
                 }
-                //饼图
                 dest.forEach((d, i) => {
                   if (d.area > 0) {
-                    this.result[index].data.push(d)
-                    this.result[index].pieData.push(pies[i])
+                    this.result[index].data.push(d);
+                    this.result[index].pieData.push(pies[i]);
                   }
-                })
-                /*if(this.result[index].pieData.length===0){
-                  this.result.splice(index,1)
-                }*/
-              })
+                });
+              });
             }
           })
           if (isNull) return

src/views/tj/compoent/JzData.vue

@@ -0,0 +1,100 @@
+<template>
+  <div ref="main" style="width:calc(100% - 0px) ;height:310px"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'index',
+  data() {
+    return {}
+  },
+  props: {
+    resultData: {
+      type: Array,
+      default: () => [{ name: '', value: 0.0 }]
+    },
+    titleText: {
+      type: String
+    }
+  },
+  methods: {
+    getPie() {
+      var _this = this
+      // 绘制图表
+      var myChart = echarts.init(this.$refs.main)
+      // 指定图表的配置项和数据
+      var option = {
+        //标题
+        title: {
+          text: this.titleText,
+          x: 'left', //标题位置
+          textStyle: {
+            //标题内容的样式
+            color: '#3d3c3c',
+            fontSize: 15 //主题文字字体大小，默认为18px
+          }
+        },
+        // stillShowZeroSum: true,
+        //鼠标划过时饼状图上显示的数据
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}:{c} ({d}%)'
+        },
+        //图例
+        legend: {
+          //图例  标注各种颜色代表的模块
+          //orient: 'vertical',//图例的显示方式  默认横向显示
+          type: 'scroll', //图例滚动效果
+          bottom: 10, //控制图例出现的距离  默认左上角
+          // itemWidth: 16,//图例颜色块的宽度和高度
+          // itemHeight: 12,
+          textStyle: {
+            //图例中文字的样式
+            color: '#000',
+            fontSize: 13
+          },
+          pageIconSize:5
+        },
+        //饼图中各模块的颜色
+        color: ['#2CA7F9', '#FF6226', '#847FFE', '#fec101', '#EE9A00', '#EE30A7', '#16A59C'],
+        // 饼图数据
+        series: {
+          // name: 'bug分布',
+          type: 'pie', //echarts图的类型   pie代表饼图
+          radius: '50%', //饼图中饼状部分的大小所占整个父元素的百分比
+          center: ['50%', '50%'], //整个饼图在整个父元素中的位置           //饼图数据
+          data: this.resultData,
+          label: {
+            normal: {
+              formatter: '{b}:\n({d}%)',
+              textStyle: {
+                fontWeight: 'normal',
+                fontSize: 13
+              }
+            }
+          },
+          itemStyle: {
+            normal: {
+              label: {
+                show: true, //饼图上是否出现标注文字 标注各模块代表什么  默认是true
+                // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
+              },
+              labelLine: {
+                show: true //官网demo里外部标注上的小细线的显示隐藏    默认显示
+              }
+            }
+          }
+        }
+      }
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option)
+      myChart.resize()
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>

src/views/tj/compoent/JzDataJz.vue

@@ -0,0 +1,99 @@
+<template>
+  <div ref="main" style="width:calc(100% - 0px) ;height:310px;"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'index',
+  data() {
+    return {}
+  },
+  props: {
+    resDatas: {
+      type: Array,
+      default: () => [
+        { name: '', value:0  },
+      ]
+    },
+    titleTexts: {
+      type: String
+    }
+  },
+  methods: {
+    getPie() {
+      var _this = this
+      // 绘制图表
+      var myChart = echarts.init(this.$refs.main)
+      var option = {
+        //标题
+        title: {
+          text: this.titleTexts,
+          x: 'left', //标题位置
+          textStyle: {
+            //标题内容的样式
+            color: '#3d3c3c',
+            fontSize: 15 //主题文字字体大小，默认为18px
+          }
+        },
+        // stillShowZeroSum: true,
+        //鼠标划过时饼状图上显示的数据
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b}:{c} ({d}%)'
+        },
+        //图例
+        legend: {
+          //图例  标注各种颜色代表的模块
+          // orient: 'vertical',//图例的显示方式  默认横向显示
+          type: 'scroll', //图例滚动效果
+          bottom: 10, //控制图例出现的距离  默认左上角
+          // itemWidth: 16,//图例颜色块的宽度和高度
+          // itemHeight: 12,
+          textStyle: {
+            //图例中文字的样式
+            color: '#000',
+            fontSize: 13
+          }
+        },
+        //饼图中各模块的颜色
+        color: ['#2CA7F9', '#FF6226', '#847FFE', '#fec101', '#EE9A00', '#EE30A7', '#16A59C'],
+        // 饼图数据
+        series: {
+          // name: 'bug分布',
+          type: 'pie', //echarts图的类型   pie代表饼图
+          radius: '50%', //饼图中饼状部分的大小所占整个父元素的百分比
+          center: ['50%', '50%'], //整个饼图在整个父元素中的位置
+          // data:''               //饼图数据
+          data: this.resDatas,
+          label: {
+            normal: {
+              formatter: '{b}:\n({d}%)',
+              textStyle: {
+                fontWeight: 'normal',
+                fontSize: 13
+              }
+            }
+          },
+          itemStyle: {
+            normal: {
+              label: {
+                show: true //饼图上是否出现标注文字 标注各模块代表什么  默认是true
+                // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
+              },
+              labelLine: {
+                show: true //官网demo里外部标注上的小细线的显示隐藏    默认显示
+              }
+            }
+          }
+        }
+      }
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option)
+      myChart.resize()
+    }
+  }
+}
+</script>
+<style scoped></style>