合并

22 години тому · 031a0a94e8
--- a/src/views/sanqing/main-gis/index.html
+++ b/src/views/sanqing/main-gis/index.html
@@ -1,23 +1,104 @@
 <div class="map" id="map22222">
 <div class="map border" id="map2">
 <!--  <Legend class="legend_pos">-->
 <!--    <div class="legend_full">-->
 <!--      <div v-for="item in LegendData" class="legend_item">-->
 <!--        <div class="icon" :style="[item.iconStyle]"></div>-->
 <!--        <p>{{item.name}}</p>-->
 <!--      </div>-->
 <!--    </div>-->
 <!--  </Legend>-->
  <div v-if="false" class="gl_pop_cash pop_statistical_desc">
    <div class="head_main">
      <div class="title">{{resourceDetail.name}}详情</div>
      <div class="close" @click="showResourceDetail = false"></div>
      <div class="xs_main">
        <div class="block">
          <div class="point p1"></div>
          <div class="point p2"></div>
          <div class="point p3"></div>
        </div>
        <div class="xs_x"></div>
      </div>
    </div>
    <div class="echarts_main">
      <div>
        <p>资源编码</p>
        <p>{{resourceDetail.code}}</p>
      </div>
      <div>
        <p>资源名称</p>
        <p>{{resourceDetail.name}}</p>
      </div>
      <div>
        <p>资源类型</p>
        <p>{{resourceDetail.resourceSort}}</p>
      </div>
      <div>
        <p>总面积(亩)</p>
        <p>{{resourceDetail.totalArea}}</p>
      </div>
      <div>
        <p>资产状态</p>
        <p>{{resourceDetail.status}}</p>
      </div>
      <div>
        <p>使用情况</p>
        <p>{{resourceDetail.useType}}</p>
      </div>
      <div>
        <p>坐落位置</p>
        <p>{{resourceDetail.location}}</p>
      </div>
      <div>
        <p>东至</p>
        <p>{{resourceDetail.east}}</p>
      </div>
      <div>
        <p>西至</p>
        <p>{{resourceDetail.west}}</p>
      </div>
      <div>
        <p>南至</p>
        <p>{{resourceDetail.south}}</p>
      </div>
      <div>
        <p>北至</p>
        <p>{{resourceDetail.north}}</p>
      </div>
      <div>
        <p>备注</p>
        <p>{{resourceDetail.remark}}</p>
      </div>
      <div>
        <p>附件</p>
        <p>
          <block v-for="(item,index) in resourceDetail.fileList">
            <a :href="item.urlApi" v-if="item.type != 'image'">
              <img :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.5vw;" alt="">
            </a>
            <img v-else :src="item.url" style="width: 3vw;height: 3vw;margin-right: 0.3vw;" alt="" @click="openImage(item.url)">
          </block>
        </p>
      </div>
    </div>

  </div>
  <div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
  <Popover v-if="showResourceDetail" :data="resourceDetail" @closePopover="closePopover" @openImage="openImage"></Popover>
  <div class="imgBox" v-if="showImg">
    <div class="box_bg" @click="showImg = false"></div>
    <img :src="fileUrl" alt="">
  </div>
  <!--选择地址-->
  <div class="select_address">
    <el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader2">
        <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
    <div class="dot left"></div>
    <div class="dot right"></div>
    <el-cascader :options="addrOptions" v-model="addrText" :props="deptTreeProps" popper-class="header-cascader-drop" @change="selectAddress" ref="cascader">
      <template slot-scope="{ node, data }">
        <span>{{ data.label }}</span>
        <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
      </template>
    </el-cascader>
  </div>
  <div class="select_wrap">
    <el-dropdown style="width: 80px">
      <span class="el-dropdown-link" style="color: #c1deff">
        {{ centerYear }}<i class="el-icon-caret-bottom el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown" class="header-new-drop">
        <el-dropdown-item v-for="item in this.yearList" :key="item" :label="item" :value="item"
          @click.native="yearDropdown(item)">{{ item }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
  <div class="mask" style="position: absolute; width: 100%; height: 100%;pointer-events: none;"></div>
 </div>
 </div>

--- a/src/views/sanqing/main-gis/index.js
+++ b/src/views/sanqing/main-gis/index.js
@@ -1,76 +1,190 @@
 import { getConfigKey } from "@/api/system/config";
 import { getInfo } from "@/api/login";
 import { treeselect, treeselectByDeptId } from "@/api/system/dept";

 import GisUtils from '@/utils/gis.js';
 import {
  assetsStatistics,
  deptFundStatistics,
  financeSummary, financeSummaryOverview, incomeBookRank, incomeMonthStatistics, incomeTownRank,
  resourceAssetsStatistics
 } from "@/api/dataScreen/bigDataMonitoring2/stockCooperative.js";
 // import { comps } from './data.js'
 import {
  fromLonLat
 } from 'ol/proj'
 import { getPermanentListByDeptId, listPermanent } from "@/api/asset/permanent.js";
 import { getInfo } from "@/api/login";
 import { getResourceListByDeptId, listResource } from "@/api/asset/resource.js";
 import Legend from '@/components/legend/index.vue';
 import { attachmentList } from "@/api/common/uploadAttachment.js";
 import { treeselect, getDept, listDeptExcludeChild } from "@/api/system/dept";
 import { getConfigKey } from "@/api/system/config";
 import { treeselectByDeptId } from "@/api/system/dept";
 import { getThreeList } from "@/api/index";

 import Popover from '../popover/index.vue';
 let gis = null;

 const DEPT_CHANGED = 1;
 const YEAR_CHANGED = 1 << 1;
 const ALL_CHANGED = ~(1 << 31);
 export default {
  components: {
  },
  watch: {
    'queryParams.deptId': {
      handler: function () {
        console.log(this.queryParams.deptId);
        this.commitDept(this.queryParams.deptId);
      },
      immediate: true, // 立即执行

    }
    Legend,
    Popover
  },
  data () {
    return {
      financeSummary: {
        funds: 0, // 资金
        totalAssets: 0, // 资产
        totalResource: 0, // 资源
        income: 0, // 经营收入
        outcome: 0, // 经营支出
        overhead: 0, // 管理费用
        revenue: 0, // 发包收入
        otherIncome: 0, // 其他收入
        otherOutcome: 0, // 其他支出
      yellowIcon: require('./icon/yellow.png'),
      //三务公开请求参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        openType: '1',
        detailedCategoriesType: null,
        villageType: null,
        openItems: null,
        meetingOpenType: null,
        deptId: null,
        isWechat: null,
        status: null,
        translate_dict: 1,
      },
      financeSummaryOverview: {
        zeroIncomeBook: 0, // 0收入组织
        areaTotalIncome: 0, // 区收入总和
        townAvgIncome: 0, // 镇平均收入
        bookAvgIncome: 0, // 组织平均收入

      //零工公开请求参数
      tempWorkerOpenQueryParams: {
        // 分页
        pageNum: 1,
        pageSize: 10,
        // 查询排序
        //orderByColumn: "id",
        //isAsc: "desc",
        bookId: null,
        deptId: null,
        deptName: null,
        openNy: null,
        openYear: null,
        openName: null,
        openFile: null,
        openPic: null,
        remark: null,
        translate_dict: 1,
      },

      //重大事项公开请求参数
      majorEventOpenQueryParams: {
        // 分页
        pageNum: 1,
        pageSize: 10,
        // 查询排序
        //orderByColumn: "id",
        //isAsc: "desc",
        bookId: null,
        deptId: null,
        deptName: null,
        openNy: null,
        openYear: null,
        openDate: null,
        openName: null,
        openFile: null,
        openPic: null,
        content: null,
        remark: null,
        translate_dict: 1,
      },

      //补贴资金管理请求参数
      subsidyFundsQueryParams: {
        // 分页
        pageNum: 1,
        pageSize: 10,
        // 查询排序
        orderByColumn: "id",
        isAsc: "desc",
        year: null,
        areaName: null,
        name: null,
        idCard: null,
        itemName: null,
        releaseDate: null,
        translate_dict: 1,
      },

      //固定资产请求参数
      permanentQueryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        name: null,
        assetType: null,
        operationType: null,
        addType: null,
        useType: null,
        assetStatus: '1',
        translate_dict: 1,
      },

      //资源资产请求参数
      resourceListQueryParams: {
        pageNum: 1,
        pageSize: 10,
        bookId: null,
        deptId: null,
        code: null,
        name: null,
        resourceType: null,
        /*farmingResourceType: null,
        buildResourceType: null,
        unusedResourceType: null,*/
        resourceSort: null,
        totalArea: null,
        location: null,
        east: null,
        west: null,
        south: null,
        north: null,
        sumArea: null,
        groupArea: null,
        groupValue: null,
        rentArea: null,
        rentValue: null,
        rentLessee: null,
        rentStartTime: null,
        rentEndTime: null,
        otherArea: null,
        otherValue: null,
        farmerArea: null,
        circulationArea: null,
        circulationValue: null,
        investmentArea: null,
        investmentValue: null,
        investmentLessee: null,
        investmentStartTime: null,
        investmentEndTime: null,
        status: null,
        translate_dict: 1,
      },
      //合同信息请求参数
      contractionByPermanentQueryParams: {
        pageNum: 1,
        pageSize: 10,
        bookId: null,
        deptId: null,
        code: null,
        name: null,
        assetType: null,
        firstParty: null,
        secondParty: null,
        collectionPay: null,
        contractionSource: null,
        totalAmount: null,
        receivedAmount: null,
        settledAmount: null,
        buildingTime: null,
        startTime: null,
        endTime: null,
        num: null,
        unit: null,
        price: null,
        contractionStatus: null,
        translate_dict: 1,
      },
      //搜索栏参数
      centerYear: new Date().getFullYear(),
      yearList: [
        new Date().getFullYear(),
        new Date().getFullYear() - 1,
        new Date().getFullYear() - 2,
        new Date().getFullYear() - 3,
        new Date().getFullYear() - 4,
      ],
      addrText: [100,],
      deptTreeProps: {
        checkStrictly: true,
      },
      queryParams: {
        year: new Date().getFullYear(),
        deptId: 100,
      },
      yellowIcon: require('./icon/yellow.png'),
      // comps,
      map: "",                        // 地图
      addrOptions: [],
      resourceDetail: {},
      //资产信息详情弹窗
      showResourceDetail: false,
      mapGeoServerUrl: "",            // geoserver地址
      mapBorder: "",                  // 地图边界
      deptLayer: "",                  // 坐标点图层
@@ -78,185 +192,265 @@ export default {
      townBorderLayerName: "",        // 乡镇边界图层名称
      villageBorderLayerName: "",     // 村边界图层名称
      groupBorderLayerName: "",       // 组边界图层名称
      addrOptions: []
      LegendData: [
        {
          iconStyle: {
            background: 'rgba(38,252,128,0.45)',
            borderColor: '#26FC80',
            border: '2px solid #26FC80'
          },
          name: '自用'
        },
        {
          iconStyle: {
            background: 'rgba(232,246,0,0.45)',
            borderColor: '#E8F600',
            border: '2px solid #E8F600'
          },
          name: '闲置'
        },
        {
          iconStyle: {
            background: 'rgba(16,252,252,0.45)',
            borderColor: '#10FCFC',
            border: '2px solid #10FCFC'
          },
          name: '出租'
        },
        {
          iconStyle: {
            background: 'rgba(198,0,255,0.45)',
            borderColor: '#C600FF',
            border: '2px solid #C600FF'
          },
          name: '其他'
        }
      ],
      threeAssetTypeOptions: [],
      threeJtzyzcTypeOptions: [],
      threeNysssbTypeOptions: [],
      threeNhTypeOptions: [],
      natureOwnershipTypeOptions: [],
      sysYesNoOptions: [],
    };
  },
  computed: {
    // currentComp: function () {
    //   return this.comps[this.tab]
    // }
  },
  created () {
    this.getDicts("three_asset_type").then((response) => {
      this.threeAssetTypeOptions = response.data;
    });
    this.getDicts("three_jtzyzc_type").then((response) => {
      this.threeJtzyzcTypeOptions = response.data;
    });
    this.getDicts("three_nysssb_type").then((response) => {
      this.threeNysssbTypeOptions = response.data;
    });
    this.getDicts("three_nh_type").then((response) => {
      this.threeNhTypeOptions = response.data;
    });
    this.getDicts("nature_ownership").then((response) => {
      this.natureOwnershipTypeOptions = response.data;
    });
    this.getDicts("sys_yes_no").then((response) => {
      this.sysYesNoOptions = response.data;
    });
    this.getGeoServerUrl();
  },
  mounted () {
    // console.log('当前年份', this.centerYear);
    this.commitYear(this.centerYear);
    // 获取geoserver的地址
    this.getGeoServerUrl();
    getInfo().then(res => {
      // this.getData();
      treeselectByDeptId({ deptId: res.user.deptId }).then((resp) => {
        this.addrOptions = resp.data;
        // 初始化地图
        this.initMap();
        this.headerTitle = res.user.deptName + '阳光村务一张图';
        listDeptExcludeChild(res.user.loginDeptId).then((resp) => {
          let deptOptions = [res.user.loginDeptId];
          resp.data.map(resm => {
            if (res.user.parentDeptName == resm.deptName) {
              deptOptions.unshift(resm.deptId)
              deptOptions.unshift(resm.parentId)
            }
          })
          this.addrText = deptOptions;
        });
        this.queryParams.deptId = res.user.loginDeptId;
        this.tempWorkerOpenQueryParams.deptId = res.user.loginDeptId;
        this.majorEventOpenQueryParams.deptId = res.user.loginDeptId;
        this.subsidyFundsQueryParams.deptId = res.user.loginDeptId;
        this.permanentQueryParams.deptId = res.user.loginDeptId;
        this.resourceListQueryParams.deptId = res.user.loginDeptId;
        this.contractionByPermanentQueryParams.deptId = res.user.loginDeptId;
        //列表请求
        this.getAllList(res.user.deptId);
        // 加载地图
        this.initMap(res.user.loginDeptId);

        // 获取村边界的图层名称
        this.getVillageBorderLayerName();
      });
    });
    })
    // treeselect().then((resp) => {
    //   this.addrOptions = resp.data
    //   getInfo().then(res => {
    //     this.initMap(res.user.loginDeptId);
    //     // 加载地图
    //   })
    // });


  },
  methods: {
    /**
     * 提交dept
     * @param {*} deptId 
     */
    commitDept (deptId) {
      this.$store.commit('SET_DEPTID', deptId);
    // 获取村边界的图层名称
    getVillageBorderLayerName () {
      getConfigKey("geoserver.layer.villageBorder").then(response => {
        this.villageBorderLayerName = response.msg;
      });
    },
    commitYear (year) {
      this.$store.commit('SET_YEAR', year);
    // 添加区县边界
    addCountyBorder (deptIds) {
      gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds)
    },
    //切换年份
    yearDropdown (item) {
      this.queryParams.year = item;
      this.centerYear = item;
      this.getData(YEAR_CHANGED);
      this.commitYear(item);
    // 添加乡镇边界
    addTownBorder (deptIds) {
      gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
    },
    // 绘制地图
    drawMap (node, isLocated) {    // isLocated 控制地图是否跳转
    // // 添加村边界
    // addVillageBorder (deptIds) {
    //   gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
    // },
    // // 获取资源列表
    // getResourceList (deptId) {
    //   getResourceListByDeptId(deptId).then(response => {
    //     if (response.data && response.data.length > 0) {
    //       this.addResourceLayer(response.data);
    //     }
    //   });
    // },
    // 获取geoserver的地址
    getGeoServerUrl () {
      // 获取geoserver的地址
      getConfigKey("system.geoServer.url").then(response => {
        this.mapGeoServerUrl = response.msg;
      });
      // 获取区县边界图层名称
      getConfigKey("geoserver.layer.countyBorder").then(response => {
        this.countyBorderLayerName = response.msg;
      });
      // 获取乡镇边界的图层名称
      getConfigKey("geoserver.layer.townBorder").then(response => {
        this.townBorderLayerName = response.msg;
      });
      // 获取村边界的图层名称
      getConfigKey("geoserver.layer.villageBorder").then(response => {
        this.villageBorderLayerName = response.msg;
      });
      // 获取组边界的图层名称
      getConfigKey("geoserver.layer.groupBorder").then(response => {
        this.groupBorderLayerName = response.msg;
      });
    },
    selectAddress (value) {
      const deptId = value[value.length - 1];
      this.queryParams.deptId = deptId;
      this.tempWorkerOpenQueryParams.deptId = deptId;
      this.majorEventOpenQueryParams.deptId = deptId;
      this.subsidyFundsQueryParams.deptId = deptId;
      this.permanentQueryParams.deptId = deptId;
      this.resourceListQueryParams.deptId = deptId;
      this.contractionByPermanentQueryParams.deptId = deptId;
      this.infoTotal = undefined;
      this.resourceTotal = undefined;
      this.permanentTotal = undefined;
      this.subsidyFundsTotal = undefined;
      this.majorEventOpenTotal = undefined;
      this.tempWorkerOpenTotal = undefined;
      this.affairsTotal = undefined;
      this.affairsList = [];
      this.tempWorkerOpenList = [];
      this.majorEventOpenList = [];
      this.subsidyFundsList = [];
      this.permanentList = [];
      this.resourceList = [];
      this.infoList = [];
      this.getAllList();

      gis.getMapContainer().removeLayer(this.villageBorder);
      this.villageBorder = '';
      // 添加村边界
      this.addVillageBorder(deptId);
      gis.getMapContainer().removeLayer(this.permanentLayer);
      this.permanentLayer = '';
      // 获取资产列表
      this.getPermanentList(deptId);
      gis.getMapContainer().removeLayer(this.resourceLayer);
      this.resourceLayer = '';
      // 获取资源列表
      this.getResourceList(deptId);
      let node = this.$refs["cascader"].panel.getNodeByValue(value);
      const dept = node.data;
      gis.getMapContainer().removeLayer(this.mapBorder);
      this.mapBorder = '';
      const deptData = {
        deptId: dept.id,
        deptName: dept.label,
        lat: dept.lat,
        lng: dept.lng,
        deptLevel: dept.deptLevel,
        orgCode: dept.orgCode
      };
      let deptList = [];
      deptList.push(deptData);
      gis.getMapContainer().removeLayer(this.deptLayer);
      this.deptLayer = '';
      if (dept.deptLevel === '5') {
        this.cityId = dept.id;
        this.currentDeptLevel = '5';
        if (dept.children && dept.children.length > 0) {
          // 添加区县边界
          this.addCountyBorder(dept.children.map(item => item.id));
          // 添加坐标点图层
          this.addDeptLayer(dept.children, 'yellow.png');
        }
        if (isLocated) {
          gis.getMapContainer().getView().setZoom(9);
          gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat]));
        }
      } else if (dept.deptLevel === '4') {
        this.countyId = dept.id;
        this.currentDeptLevel = '4';
        if (dept.children && dept.children.length > 0) {
          // 添加乡镇边界
          this.addTownBorder(dept.children.map(item => item.id));
          // 添加坐标点图层
          this.addDeptLayer(dept.children, 'yellow.png');
        }
        if (isLocated) {
          gis.getMapContainer().getView().setZoom(11);
          gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat]));
        }
        // this.villageIds = this.findLeafNodeIds(dept);
      } else if (dept.deptLevel === '3') {
        this.townId = dept.id;
        this.countyId = node.path.slice(-2)[0];
        this.currentDeptLevel = '3';
        if (dept.children && dept.children.length > 0) {
          // 添加村边界
          this.addVillageBorder(dept.children.map(item => item.id));
          // 添加坐标点图层
          this.addDeptLayer(dept.children, 'yellow.png');
        }
        if (isLocated) {
          gis.getMapContainer().getView().setZoom(13);
          gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat]));
        }
        // this.villageIds = this.findLeafNodeIds(dept);
      } else if (dept.deptLevel === '2') {
        this.ruralId = dept.id;
        this.townId = node.path.slice(-2)[0];
        this.countyId = node.path.slice(-3)[0];
        this.currentDeptLevel = '2';
        if (dept.children && dept.children.length > 0) {
          const groupIds = dept.children.map(item => item.id);
          // 添加组边界
          this.addGroupBorder(groupIds);
          // 添加组的坐标点图层，并且跳转到图层的中心点位置
          this.addGroupPointLayer(groupIds, isLocated);
        } else {
          // 添加村边界
          this.addVillageBorder(dept.id);
          // 添加坐标点图层
          let deptList = [];
          deptList.push(dept);
          this.addDeptLayer(deptList, 'yellow.png');
          if (isLocated) {
            gis.getMapContainer().getView().setCenter(fromLonLat([dept.lng, dept.lat]));
          }
        }
        if (isLocated) {
          gis.getMapContainer().getView().setZoom(15);
        }
        // this.villageIds = this.findLeafNodeIds(dept);
      } else if (dept.deptLevel === '1') {
        this.ruralId = node.path.slice(-2)[0];
        this.townId = node.path.slice(-3)[0];
        this.countyId = node.path.slice(-4)[0];
        this.currentDeptLevel = '1';
        // 添加组边界
        this.addGroupBorder(dept.id);
        // 添加组的坐标点图层，并且跳转到图层的中心点位置
        this.addGroupPointLayer(dept.id, isLocated);
        if (isLocated) {
          gis.getMapContainer().getView().setZoom(17);
        }
        // this.villageIds = this.findLeafNodeIds(dept);
      }
      // this.changeLayerByDept();
      // 添加坐标点图层
      this.addDeptLayer(deptList, 'yellow.png');
      gis.getMapContainer().getView().animate({
        // 只设置需要的属性即可
        center: fromLonLat([dept.lng, dept.lat]), // 中心点
        duration: 500, // 缩放持续时间，默认不需要设置
      });
    },
    tabChange (info) {
      this.tab = info.id;
    // 添加村边界
    addVillageBorder (deptIds) {
      gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
    },
    // 初始化地图
    initMap () {
      let dept = this.addrOptions[0];
      let mapCenterLocation;
      if (dept.lng && dept.lat) {
        mapCenterLocation = [dept.lng, dept.lat];
      } else {
        mapCenterLocation = [116.391461, 39.902359];
      }
      gis = new GisUtils('map22222')
    // 加载地图
    initMap (deptId) {
      gis = new GisUtils('map2')
      gis.addTianDiTuLayer()
      gis.addAnnotationLayer()
      if (dept.deptLevel === '5') {

      let dept2 = this.addrOptions[0];
      //console.log(this.addrOptions, 'this.addrOptions');
      // console.log(dept2, 888);
      if (dept2.deptLevel === '5') {
        // 登录身份为市级领导
        this.userRole = 'cityLeader';
        this.cityId = dept.id;
        this.currentDeptLevel = '5';
        // 添加区县边界
        this.addCountyBorder(dept.children.map(item => item.id));
      } else if (dept.deptLevel === '4') {
      } else if (dept2.deptLevel === '4') {
        // 登录身份为县级领导
        this.userRole = 'countyLeader';
        this.countyId = dept.id;
        this.countyId = dept2.id;
        this.currentDeptLevel = '4';
        // 添加乡镇边界
        this.addTownBorder(dept.children.map(item => item.id));
        gis.getView().setZoom(11);
      } else if (dept.deptLevel === '3') {
        this.addTownBorder(dept2.children.map(item => item.id));
        // gis.getView().setZoom(11);
      } else if (dept2.deptLevel === '3') {
        // 登录身份为镇级领导
        this.userRole = 'townLeader';
        this.townId = dept.id;
        this.townId = dept2.id;
        this.currentDeptLevel = '3';
        // 添加村边界
        this.addVillageBorder(dept.children.map(item => item.id));
        this.addVillageBorder(dept2.children.map(item => item.id));
        gis.getView().setZoom(13);
      }
      debugger
      // 添加坐标点图层
      if (dept.children) {
        this.addDeptLayer(dept.children);
      if (dept2.children) {
        this.addDeptLayer(dept2.children);
      }
      gis.getView().setCenter(fromLonLat(mapCenterLocation))

      // 地图点击事件
      // // 获取资源列表
      this.getResourceList(deptId);
      gis.getMapContainer().on("click", (evt) => {
        let feature = gis.getMapContainer().forEachFeatureAtPixel(
          evt.pixel,
@@ -264,140 +458,209 @@ export default {
        );
        if (feature) {
          // 镇级：加载村级坐标点
          if (feature.get('level') === 'deptPoint') {
            let parentIds = [];
            this.findParentNodeIds(this.addrOptions, feature.get('deptId'), parentIds);
            this.addrText = parentIds;
            this.selectAddress(parentIds);
          if (feature.get('deptLevel') === '3') {
            gis.getMapContainer().getView().animate({
              center: fromLonLat([feature.get('lng'), feature.get('lat')]), // 中心点
              zoom: 12, // 缩放级别
              rotation: undefined, // 缩放完成view视图旋转弧度
              duration: 1000, // 缩放持续时间，默认不需要设置
            });
          } else {
            feature.values_.detail.threeDetailType =
              feature.values_.detail.threeAssetType == '1' ?
                this.selectDictLabel(this.threeJtzyzcTypeOptions, feature.values_.detail.threeDetailType) :
                feature.values_.detail.threeAssetType == '2' ?
                  this.selectDictLabel(this.threeNysssbTypeOptions, feature.values_.detail.threeDetailType) :
                  feature.values_.detail.threeAssetType == '3' ?
                    this.selectDictLabel(this.threeNhTypeOptions, feature.values_.detail.threeDetailType) : ''
              ;
            feature.values_.detail.threeAssetType = this.selectDictLabel(this.threeAssetTypeOptions, feature.values_.detail.threeAssetType);
            feature.values_.detail.natureOwnership = this.selectDictLabel(this.natureOwnershipTypeOptions, feature.values_.detail.natureOwnership);
            feature.values_.detail.qssfczzy = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.qssfczzy);
            feature.values_.detail.sfwtdg = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.sfwtdg);
            feature.values_.detail.sfnzcsy = this.selectDictLabel(this.sysYesNoOptions, feature.values_.detail.sfnzcsy);

            this.listDialogHidden('detail');
            this.openResourceDialog(feature.values_.detail);
          }
        }
      });
    },
    getData (mask) {
      if (!mask)
        mask = ALL_CHANGED;
      financeSummary(this.queryParams).then((resp) => {
        let data = resp;
        this.financeSummary.funds = data.funds;
        this.financeSummary.totalAssets = data.totalAssets;
        this.financeSummary.totalResource = data.totalResource;
        this.financeSummary.income = data.income;
        this.financeSummary.outcome = data.outcome;
        this.financeSummary.overhead = data.overhead;
        this.financeSummary.revenue = data.revenue;
        this.financeSummary.otherIncome = data.otherIncome;
        this.financeSummary.otherOutcome = data.otherOutcome;
      });
      deptFundStatistics(this.queryParams).then((resp) => {
        let data = resp.data;
        // this.leftTopEchart(this.genChartData(data));
        this.fundAmountTotal = data.extras.total;
      });
      resourceAssetsStatistics(this.queryParams).then((resp) => {
        // this.leftBottomEchart(this.genChartData(resp.data));
      });
      assetsStatistics(this.queryParams).then((resp) => {
        // let data = this.genChartData(resp.data);
        // this.leftCenterEchart(data);
        // this.assetStatistics = data.xAxis.data.map((x, i) => {
        //   return {
        //     name: x,
        //     value: data.series[0].data[i],
        //   };
        // });
      });
      incomeMonthStatistics(this.queryParams).then((resp) => {
        // this.rightTopEchart(this.genChartData(resp.data));
      });
      incomeBookRank(this.queryParams).then((resp) => {
        this.incomeBookRankList = resp.data;

      // 缩小地图，重新加载页面
      gis.getMapContainer().on("moveend", (evt) => {
        const zoom = gis.getMapContainer().getView().getZoom();
        if (this.villagePointLayer && zoom < 10.5) {
          gis.getMapContainer().removeLayer(this.villagePointLayer);
          this.villagePointLayer = "";
        }
      });
      if (mask & YEAR_CHANGED) {
        incomeTownRank(this.queryParams).then((resp) => {
          this.incomeTownRankList = resp.data;
        });
        financeSummaryOverview(this.queryParams).then((resp) => {
          let data = resp.data;
          this.financeSummaryOverview.zeroIncomeBook = data.zeroIncomeBook;
          this.financeSummaryOverview.areaTotalIncome = data.areaTotalIncome;
          this.financeSummaryOverview.townAvgIncome = data.townAvgIncome;
          this.financeSummaryOverview.bookAvgIncome = data.bookAvgIncome;
          // this.dashboardZeroincome();
          // this.dashboardZeroincome2();
          // this.dashboardZeroincome3();
          // this.dashboardZeroincome4();
        });
      }
    },
    selectAddress (value, isLocated = true) {  // isLocated 控制地图是否跳转
      this.queryParams.deptId = value[value.length - 1];
      this.getData(DEPT_CHANGED);
      let node = this.$refs["cascader2"].panel.getNodeByValue(value);
      this.drawMap(node, isLocated);
    listDialogHidden (type) {
      if (type == 'detail') {
        //合同信息详情弹窗
        this.showInfoDetail = false;
        //资源信息详情弹窗
        this.showResourceDetail = false;
        //资产信息详情弹窗
        this.showPermanentDetail = false;
        //农业补贴详情弹窗
        this.showSubsidyFundsDetail = false;
        //重大事项详情弹窗
        this.showMajorEventDetail = false;
        //零工公开详情弹窗
        this.showTempWorkerDetail = false;
        //三务公开详情弹窗
        this.showAffairsDetail = false;
      } else {
        //三务公开列表弹窗
        this.showAffairs = false;
        //零工公开列表弹窗
        this.showTempWorker = false;
        //重大事项列表弹窗
        this.showMajorEvent = false;
        //农业补贴列表弹窗
        this.showSubsidyFunds = false;
        //资产信息列表弹窗
        this.showPermanent = false;
        //资源信息列表弹窗
        this.showResource = false;
        //合同信息列表弹窗
        this.showInfo = false;
        //合同信息详情弹窗
        this.showInfoDetail = false;
        //资源信息详情弹窗
        this.showResourceDetail = false;
        //资产信息详情弹窗
        this.showPermanentDetail = false;
        //农业补贴详情弹窗
        this.showSubsidyFundsDetail = false;
        //重大事项详情弹窗
        this.showMajorEventDetail = false;
        //零工公开详情弹窗
        this.showTempWorkerDetail = false;
        //三务公开详情弹窗
        this.showAffairsDetail = false;
      }

    },
    // 查找指定deptId的所有父节点id
    findParentNodeIds (tree, deptId, result) {
      for (let node of tree) {
        if (node.id === deptId) {
          result.unshift(node.id);
          return true;
        }
        if (node.children && node.children.length > 0) {
          let isFind = this.findParentNodeIds(node.children, deptId, result);
          if (isFind) {
            result.unshift(node.id);
            return true;
    openResourceDialog (data) {
      data.fileList = [];
      console.log(data)
      let parmasData = {
        tableId: data.id,
        tableName: 't_asset_three',
        bizPath: 'asset',
      };
      attachmentList(parmasData).then((res) => {
        if (res.code == 200) {
          let UattachmentList = res.rows;
          for (let i = 0; i < UattachmentList.length; i++) {
            let fileName = UattachmentList[i].fileName;
            let subIndex = fileName.lastIndexOf(".");
            let ext = fileName.substring(subIndex + 1, fileName.length);
            let urls = "";
            let type = "";
            if (ext == "xlsx" || ext == "xls") {
              urls = require("@/assets/images/icon_excel.jpg");
              type = 'excel';
            } else if (ext == "doc" || ext == "docx") {
              urls = require("@/assets/images/icon_word.jpg");
              type = 'word';
            } else if (ext == "pdf") {
              urls = require("@/assets/images/icon_pdf.jpg");
              type = 'pdf';
            } else if (ext == "zip") {
              urls = require("@/assets/images/icon_zip.jpg");
              type = 'zip';
            } else {
              urls = '/api' + UattachmentList[i].fileUrl;
              type = 'image';
            }
            data.fileList.push({
              url: urls,
              urlApi: '/api' + UattachmentList[i].fileUrl,
              type: type
            })
          }
          this.showResourceDetail = true;
          this.resourceDetail = data;
        }
      }
      return false;
      });
    },

    // 添加坐标点图层
    addDeptLayer (nextDeptSet) {
    // 创建矢量数据源
    addDeptLayer (nextDeptSet, locationIcon) {
      //console.log('nextDeptSet', nextDeptSet);
      let features = [];
      nextDeptSet.forEach(item => {
        let fs = gis.getFeature(item, this.yellowIcon)
        features.push(fs);
      });
      gis.getVectorLayerByFs(features)
      gis.mapSetFit(features)

      // gis.mapSetFit(features)
    },
    // 添加区县边界
    addCountyBorder (deptIds) {
      gis.addImageLayer(this.mapGeoServerUrl, this.countyBorderLayerName, deptIds)
    },
    // 添加乡镇边界
    addTownBorder (deptIds) {
      gis.addImageLayer(this.mapGeoServerUrl, this.townBorderLayerName, deptIds)
    },
    // 添加村边界
    addVillageBorder (deptIds) {
      gis.addImageLayer(this.mapGeoServerUrl, this.villageBorderLayerName, deptIds)
    },
    // 获取geoserver的地址
    getGeoServerUrl () {
      // 获取geoserver的地址
      getConfigKey("system.geoServer.url").then(response => {
        this.mapGeoServerUrl = response.msg;
      });
      // 获取区县边界图层名称
      getConfigKey("geoserver.layer.countyBorder").then(response => {
        this.countyBorderLayerName = response.msg;
    // 获取资源列表
    getResourceList (deptId) {
      getThreeList({ deptId: deptId }).then(response => {
        if (response.rows && response.rows.length > 0) {
          this.addResourceLayer(response.rows);
        }
      });
      // 获取乡镇边界的图层名称
      getConfigKey("geoserver.layer.townBorder").then(response => {
        this.townBorderLayerName = response.msg;
      // getResourceListByDeptId(deptId).then(response => {
      //   if (response.data && response.data.length > 0) {
      //     this.addResourceLayer(response.data);
      //   }
      // });
    },
    // 添加资源图层
    addResourceLayer (resourceList) {
      let features = [];
      resourceList.forEach(item => {
        if (item.theGeom != null && item.theGeom !== '') {
          const { threeAssetType } = item
          // console.log(222, threeAssetType, item);
          let color = this.LegendData[threeAssetType - 1 + '']
          let fs = gis.getFeature3(item, color.iconStyle.background, color.iconStyle.borderColor)
          features.push(fs);
        }
      });
      // 获取村边界的图层名称
      getConfigKey("geoserver.layer.villageBorder").then(response => {
        this.villageBorderLayerName = response.msg;
      gis.getVectorLayerByFs(features)
      gis.mapSetFit(features)
    },
    // 获取资产列表
    getPermanentList (deptId) {
      getThreeList({ deptId: deptId }).then(response => {
        if (response.data && response.data.length > 0) {
          this.addPermanentLayer(response.data);
        }
      });
      // 获取组边界的图层名称
      getConfigKey("geoserver.layer.groupBorder").then(response => {
        this.groupBorderLayerName = response.msg;
    },
    getAllList (deptId) {
      //三务公开
      // this.getList(null);
      // //零工公开
      // this.getTempWorkerOpenList();
      // //重大事项公开
      // this.getMajorEventOpenList();
      // //补贴资金管理
      // this.getSubsidyFundsList();
      // //固定资产
      // this.getPermanentListList();
      // //资源资产
      // this.getResourceListList();
      // //合同信息
      // this.getContractionByPermanentList();
      // //资金情况
      // this.getFundAndBankAmountByDeptIdArray();
      //this.getThreeList(deptId);
    },
    getThreeList (deptId) {

      getThreeList({ deptId: deptId }).then(response => {

      });
    },
    closePopover () {
      this.showResourceDetail = false;
    }
  }
 };
--- a/src/views/sanqing/main-gis/index.scss
+++ b/src/views/sanqing/main-gis/index.scss
@@ -4,53 +4,265 @@
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
 }

 /deep/ .el-cascader {
  .el-input {
    background-color: transparent !important;
  .legend_pos {
    z-index: 21 !important;
    position: absolute;
    top: 100px;
    right: 480px;

    .legend_full {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .legend_item {
        display: flex;
        justify-content: center;
        // border: 1px solid red;
        align-items: center;

        .icon {
          width: 16px;
          height: 16px;
          border-radius: 2px;
          margin-right: 10px;
        }
      }

    .el-input__inner {
      border: 0;
      background-color: transparent !important;
      color: white;
    }
  }
 }

 .mask {
  z-index: 1;
  width: 100%;
  height: 100%;
  box-shadow: inset 350px 0px 400px 100px RGBA(3, 12, 27, 1), inset -350px 0 400px 100px RGBA(3, 12, 27, 1); // 左
  /* 四周黑色 */
  // pointer-events: none;
  /* 允许地图事件穿透 */
  .mask {
    z-index: 1;
    width: 100%;
    height: 100%;
    box-shadow: inset 350px 0px 400px 100px RGBA(3, 12, 27, 1), inset -350px 0 400px 100px RGBA(3, 12, 27, 1); // 左
    /* 四周黑色 */
    pointer-events: none;
    /* 允许地图事件穿透 */
  }
 }

 //选择地址
 .select_address {
  z-index: 22;
  // cursor: pointer;
  // pointer-events: none;
  width: 300px;
  position: absolute;
  left: 480px;
  top: 112px;
  height: 44px;
  border: 2px solid #3181F6;
  left: 30px;
  top: 40px;
  z-index: 302;

  box-shadow: inset 0 0 10px 2px rgba(27, 123, 204, 0.8);
  /* 添加内发光效果 */

  // <div class="dot left"></div>
  //     <div class="dot right"></div>
  ::v-deep {
    .el-input--suffix {
      // background: url('../../../../assets/images/dataScreen/bigDataMonitoring2/stockCooperative/addText_bg.png') center center no-repeat !important;
      background-size: 100% 100% !important;
      width: 280px;

      .el-input__inner {
        background: none !important;
        border: 0 none !important;
        color: #a7dbff;
        font-size: 1.66vh;
        text-align: center;
        padding: 0;
      }

      .el-input__icon {
        display: none !important;
      }
    }
  }
 }

 .select_wrap {
  z-index: 10;
  width: 88px;
  height: 44px;
  background: rgba(3, 16, 40, 0.2);
  border: 2px solid #3181F6;
 .gl_pop_cash {
  background: rgba(10, 25, 47, 0.8);
  position: absolute;
  left: 710px;
  top: 112px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 14px;
  border: 1px solid #063a95;
  border-left: 0.15vw solid #357dfa;
  padding: 0 1vw;
  z-index: 11;

  .head_main {
    height: 4.62vh;
    padding-top: 0.55vh;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;

    .title {
      color: #ffad00;
      font-size: 1.66vh;
    }

    .close {
      background: url('./close.png');
      // border: 1px solid red;
      background-size: 100% 100%;
      width: 1.48vh;
      height: 1.48vh;
      cursor: pointer;
    }

    .xs_main {
      height: 0.55vh;
      position: absolute;
      width: 100%;
      bottom: -0.55vh;
      display: flex;
      align-items: center;

      .block {
        width: 2.34vw;
        display: flex;

        .point {
          width: .55vh;
          height: .55vh;
          margin-right: 0.36vw;

          &.p1 {
            background: rgba(53, 125, 250, 1)
          }

          &.p2 {
            background: rgba(53, 125, 250, .7)
          }

          &.p3 {
            background: rgba(53, 125, 250, .4)
          }
        }

      }

      .xs_x {
        height: 1px;
        flex: 1;
        background: #214284;
      }
    }
  }

  .echarts_main {
    .headers {
      height: 3.33vh;
      font-size: 1.48vh;
      color: #0befca;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 0.53vw;
      background: rgba(11, 239, 202, .2);
      margin-bottom: 0.9vh
    }

    .desc_main {
      overflow-y: scroll;
      padding-right: 0.33vw;

      .analysisTable_list {
        margin: 0;
        padding: 0;
        flex: 1;
        display: flex;
        flex-direction: column;

        .flex_item {
          cursor: pointer;
          list-style: none;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          color: #fff;
          font-size: 1.29vh;
          position: relative;
          height: 3.2vh;

          &:nth-child(2n) {
            background: rgba(53, 125, 250, .1);
          }
        }
      }
    }
  }

 }

 .pop_statistical_desc {
  width: 20.2vw;
  margin: 0;
  right: 23vw;
  top: 35vh;
  padding-bottom: 1.04vw !important;

  .head_main {
    .title {
      color: #fff;
    }
  }

  .echarts_main {
    margin-top: 1.66vh;

    div {
      display: flex;
      align-items: center;

      &:nth-child(even) {
        background: rgba(32, 89, 188, 0.2);
      }

      p {
        &:nth-child(1) {
          width: 8vw;
          padding-left: 1vw;
          flex-shrink: 0;
        }

        &:nth-child(2) {
          color: #ffad00;
        }

        margin: 0;
        color: #ffffff;
        font-size:1.33vh;
        line-height: 3.92vh;
      }
    }
  }
 }


 .imgBox {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999999;
  width: 100vw;
  height: 100%;

  .box_bg {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
  }

  img {
    height: 60vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
 }