From 3414299954e89e4c2f18ea72f77a3aafd76fb3b6 Mon Sep 17 00:00:00 2001
From: zhaoyongnian <541231643@qq.com>
Date: Mon, 23 May 2022 17:07:15 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=BD=91=E6=A0=BC=E5=85=9A=E5=BB=BA?=
 =?UTF-8?q?=E5=B9=B3=E9=9D=A2=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                           |   5 +
 .../visual/communityParty/gridParty.vue       | 736 ++++++++++++++++++
 .../visual/communityParty/memberInfo.vue      | 251 ++++++
 .../visual/components/screen-map/index.vue    |  15 +-
 4 files changed, 1006 insertions(+), 1 deletion(-)
 create mode 100644 src/views/modules/visual/communityParty/gridParty.vue
 create mode 100644 src/views/modules/visual/communityParty/memberInfo.vue

diff --git a/src/router/index.js b/src/router/index.js
index bd3fbe5a..903016e6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -268,6 +268,11 @@ router.beforeEach((to, from, next) => {
       name: "社区党建",
       // url: "visual/basicinfo/basicInfoMain",
       children: [
+        {
+          url: "/visual/communityParty/gridParty",
+          name: "网格党建平面图",
+          id: "5feawfwaefwa579",
+        },
         {
           url: "/visual/communityParty/party",
           name: "党员信息统计",
diff --git a/src/views/modules/visual/communityParty/gridParty.vue b/src/views/modules/visual/communityParty/gridParty.vue
new file mode 100644
index 00000000..fbe6af59
--- /dev/null
+++ b/src/views/modules/visual/communityParty/gridParty.vue
@@ -0,0 +1,736 @@
+<template>
+  <div class="warning-box">
+    <cpt-card>
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          网格党建平面图&nbsp;&nbsp;
+          <el-cascader 
+            v-model="selectAgency"
+            :options="propTree" 
+            :props="{ checkStrictly: true }" 
+            :show-all-levels="false"
+            :getCheckedNodes="getCheckedNodes"
+            clearable 
+            @change="handleCascader">
+          </el-cascader>
+        </div> 
+      </div>
+      <div class="card-echart">
+        <div class="card-left">
+          <!-- <div class="card-left-title">党员学历统计</div> -->
+          <div class="card-flex">
+            <div class="echart-wr echart-wr100">
+              <screen-echarts-frame class="echart-org"
+                              @myChartMethod="pieInitOks"
+                              ref="eduChart"></screen-echarts-frame>
+            </div>
+          </div>
+          <div class="warning-box-bottom">
+            <screen-table
+              :headerList="headerEduList"
+              :tableData="eduList"
+              :headerStyle="headerStyle"
+              :tableContentStyle="headerStyle"
+              :visibleLoading="visibleLoading"
+              :operate="false"
+              @row="handleClickRow"
+            ></screen-table>
+            <div class="pagination">
+              <el-pagination
+                :current-page="pageNo"
+                :page-size="pageSize"
+                background
+                layout="prev, pager, next"
+                @size-change="pageSizeChangeHandle"
+                @current-change="pageCurrentChangeHandle"
+                :total="total"
+              >
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+        <div class="card-right">
+          <screen-map class="map"
+                      ref="map"
+                      @clickFeature="clickProject"
+                      @lookMore="lookMore"
+                      :showPolygonLayer="true"
+                      :isAddOpenlay="true"
+                      :clickType="'popup'"
+                      :showIconLayer="true"
+                      :showPolIconLayer="true"
+                      :areaScale="0.1"></screen-map>
+        </div>
+      </div>
+    </cpt-card>
+    <member-info v-if="showedUnitMoreInfo"
+              :list="unitAclist"
+              ref="unitdetailInfo"
+              @close="showedUnitMoreInfo = false" />
+    <people-more v-show="showedMoreInfo"
+              v-if="userId"
+              :userId="userId"
+              :gridName="''"
+              @close="showedMoreInfo = false" />
+  </div>
+</template>
+
+<script>
+import { requestPost } from "@/js/dai/request";
+import screenTable from "../components/screen-table/index";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+import screenEchartsFrame from "../components/screen-echarts-frame";
+import { pieOption } from './options'
+import * as echarts from 'echarts';
+import screenMap from "@/views/modules/visual/components/screen-map";
+import memberInfo from './memberInfo.vue'
+import peopleMore from "@/views/modules/visual/basicinfo/cpts/people-more";
+
+export default {
+  name: "gridParty",
+  components: {
+    cptCard,
+    screenTable,
+    screenEchartsFrame,
+    screenMap,
+    memberInfo,
+    peopleMore
+  },
+  data() {
+    return {
+      headerStyle: [
+        {
+          'max-width': '60px'
+        },
+        {
+          'min-width': '100px'
+        },
+        {
+          'min-width': '100px'
+        },
+        {
+          'min-width': '160px'
+        }
+      ],
+      headerEduList: [
+        { title: "序号", coulmn: 'index' },
+        { title: "姓名", coulmn: 'name' },
+        { title: "手机号码", coulmn: 'mobile' }
+      ],
+      noEduInit: false,
+      selectAgency: null,
+      eduTotalCount: 0,
+      propTree: [],
+      visibleLoading: true,
+      agencyId: '',
+      orgType: '',
+      eduCode: '', // 点击饼状图 查询列表，查询地图
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      eduItem: [],
+      eduList: [],
+      pieEduOptions: null,
+      showedUnitMoreInfo: false,
+      unitAclist: [],
+      // 地图相关*********************************************start
+      isfirstInit: true,
+      agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
+      iconUrlArray: [],
+      parentPolygon: [],
+      orgId: '',
+      unitMapList: [],
+      showedMoreInfo: false,
+      userId:"",
+      // 地图相关*********************************************end
+    };
+  },
+  async mounted() {
+    await nextTick(100);
+    await this.getAgencyList()
+    this.agencyId  = this.$store.state.user.agencyId
+    this.getEduCount(this.$store.state.user.agencyId) // 饼状统计图
+    this.getEduList() // 左下角列表数据
+    // 地图相关start
+    this.iconUrlArray = [
+      require('../../../../assets/img/shuju/measure/lxdj.png'),
+      require('../../../../assets/img/shuju/measure/lxzz.png'),
+      require('../../../../assets/img/shuju/measure/qydw.png'),
+      require('../../../../assets/img/shuju/measure/jgzs.png'),
+      require('../../../../assets/img/shuju/measure/qita.png'),
+      require('../../../../assets/img/shuju/measure/minban.png'),
+      require('../../../../assets/img/shuju/measure/jijin.png'),
+      require('../../../../assets/img/shuju/measure/other.png')
+    ]
+    await this.loadOrgData()
+    await this.getWorkUserInfo()
+    this.loadMap()
+    this.isfirstInit = false
+    // 地图相关end
+  },
+  methods: {
+    loadMap () {
+      if (this.isfirstInit) {
+        const polIconUrlArray = [
+          'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png'
+        ]
+          this.$refs.map.loadMap(this.agencyInfo, this.parentPolygon, polIconUrlArray, this.unitMapList, this.iconUrlArray, null,)
+      } else {
+        this.$refs.map.refreshMap(this.agencyInfo, this.parentPolygon, this.unitMapList)
+      }
+    },
+    // 加载组织树
+    async getAgencyList(node, resolve) {
+      const url = '/gov/org/customeragency/agencygridtree'
+      // let params = {
+      //   agencyId: this.$store.state.user.agencyId,
+      // };
+      const { data, code, msg } = await requestPost(url);
+      if (code === 0) {
+        console.log('data-org----o', data)
+        this.selectAgency = [`${data.agencyId}-${data.level}`]
+        this.orgType = data.level
+        this.agencyId = data.agencyId
+        let arr = []
+        arr.push(data)
+        this.propTree = arr && this.getTreeData(arr)
+      } else {
+      }
+    },
+    // 组织树相关方法
+    getTreeData(data){
+      if (!Array.isArray(data)) return []
+      let arr = data.map(item => {
+        let _item = {}
+        if (item.subAgencyList) {
+          if (item.subAgencyList.length === 0) {
+            _item = { 
+              label: item.agencyName,
+              value: item.agencyId + '-' + item.level,
+              level: item.level,
+              children: undefined 
+            }
+          } else _item = { 
+            label: item.agencyName,
+            value: item.agencyId + '-' + item.level,
+            level: item.level,
+            children: this.getTreeData(item.subAgencyList)}
+        } else {
+          _item = { 
+            label: item.agencyName,
+            value: item.agencyId + '-' + item.level,
+            level: item.level,
+          }
+        }
+        return _item
+      })
+      return arr
+    },
+    // 组织点击事件
+    async handleCascader(val) {
+      console.log('val-vvv', val)
+      const _arr = val[val.length - 1].split('-')
+      const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+      this.agencyId = _arr[0]
+      this.orgId = _arr[0]
+      this.orgType = orgType
+      this.noEduInit = false
+      this.agencyInfo = { ...this.orgData }
+      console.log('agencyInfo-----', this.agencyInfo)
+      this.eduCode = ''
+      await this.loadOrgData()
+      this.getEduCount(_arr[0])
+      this.eduList = []
+      this.pageNo = 1;
+      this.pageSize = 10;
+      await this.getEduList()
+      this.getMapData()
+    },
+    // 图标相关*********************************
+    // 饼状统计
+    async getEduCount(agencyId) {
+      const url = "/epmetuser/icVolunteerPoly/statistics";
+      let params = {
+        agencyId
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.eduItem = data.map(item => {
+          return {
+            ...item,
+            name: item.label,
+            isClick: false
+          }
+        })
+        
+        this.eduTotalCount = 0
+        data.forEach(item => {
+          this.eduTotalCount += Number(item.value)
+        })
+        this.initEduCharts()
+      } else {
+      }
+    },
+    initEduCharts() {
+      // const eId = document.getElementById('echartOrg')
+      // let _charts = echarts.init(eId)
+      let option = {
+      
+      }
+      let legend = {
+        show: true,
+        orient: 'vertical',
+        top: '20%',
+        right: 0,
+        textStyle: {
+          width: 90,
+          color: '#fff',
+          rich: {
+            a: {
+              width: 90
+            }
+          }
+        },
+        formatter: name => {
+          for (let a = 0; a < this.eduItem.length; a++) {
+            // this.data  这个数据中有名称和次数
+            if (this.eduItem[a].name === name) {
+              //两个名称进行对比，取出对应的次数
+              let params1 = name + "\n"; //然后return你需要的legend格式即可
+              let tmp = params1.split("\n");
+              let res = "" + params1;
+              for (let i in tmp) {
+                res = res.replace(tmp[i], "");
+              }
+              return res + params1;
+            }
+          }
+        }
+      }
+      this.pieEduOptions = pieOption(this.pieEduChartS)
+      this.pieEduOptions.legend = { ...legend }
+      this.clickEduPie(0)
+      let fun = params => {
+        this.clickEduPie(params.dataIndex)
+      }
+      this.$refs.eduChart.handleClick(fun)
+    },
+    // 点击饼状图
+    clickEduPie (seriesIndex) {
+      let _code = ''
+      let isClick = false
+      this.eduItem.forEach((element, index) => {
+        if (index === seriesIndex) {
+          _code = element.code
+
+          if (!this.noEduInit) isClick = false
+          else {
+            element.isClick = !element.isClick
+            isClick = element.isClick
+          }
+
+          element.label = {
+            show: true,
+
+          };
+          element.labelLine = {
+            show: true,
+            lineStyle: {
+              opacity: 1,
+            }
+
+          };
+          console.log('zlcm')
+        } else {
+          element.isClick = false
+          element.label = {
+            show: false,
+
+          };
+          element.labelLine = {
+            show: false,
+            lineStyle: {
+              opacity: 0,
+              color: 'rgba(255,255,255,0)'
+            }
+
+          };
+
+        }
+      });
+      this.eduCode = isClick && _code || ''
+      this.pieEduOptions.title.text = this.eduTotalCount
+      this.pieEduOptions.series[1].data = this.eduItem
+      // this.$refs.pieChart.hideLoading()
+      this.$refs.eduChart.setOption(this.pieEduOptions)
+      if (this.noEduInit) {
+        const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+        this.pageNo = 1
+        this.getEduList(isClick && _code || '')
+        this.getMapData(isClick && _code || '')
+      }
+      this.noEduInit = true
+    },
+    // 列表相关*************************************
+    // 请求列表数据
+    async getEduList(_code) {
+      this.visibleLoading = true
+      const url = "/epmetuser/icVolunteerPoly/list";
+      let params = {
+        code: this.eduCode,
+        agencyId: this.agencyId,
+        pageNo: this.pageNo,
+        pageSize: this.pageSize
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        this.eduList = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1
+          }
+        })
+        this.total = data.total
+      } else {
+        this.$message.error(msg)
+      }
+      this.visibleLoading = false
+    },
+    pieInitOks (dom) {
+      console.log('pies准备好了', dom)
+      this.pieEduChartS = dom
+      // this.pieInitState = true
+    },
+    // 点击列表
+    handleClickRow(val) {
+      this.servicelist(val.idCard)
+    },
+    // 多元-社区自组织服务需求分页列表
+    async servicelist (idCard) {
+      const url = "/heart/residemand/service-list";
+      let params = {
+        pageNo: 1,
+        pageSize: 1000,
+        type: 'volunteer', // 志愿者：volunteer；社区自组织：community_org；
+        idCard: idCard, // volunteer时传入此参数。
+        serverId: ''
+      };
+      const { data, code, msg } = await requestPost(url, params);
+      if (code === 0) {
+        if (data.list.length > 0) {
+          this.showedUnitMoreInfo = true
+          this.unitAclist = data.list
+          this.$nextTick(() => {
+            console.log(this.unitAclist[0].demandRecId)
+            this.$refs['unitdetailInfo'].getDetail(this.unitAclist[0].demandRecId)
+          }) 
+        } else {
+          this.showedUnitMoreInfo = false
+          this.unitAclist = []
+          this.$message.warning('该志愿者还没有需求')
+        }
+      } else {
+      }
+    },
+    getCheckedNodes(val) {
+      console.log('val-nnn', val)
+    },
+    pageSizeChangeHandle(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+      this.getEduList(this.eduCode)
+    },
+    pageCurrentChangeHandle(val) {
+      this.pageNo = val;
+      this.getEduList(this.eduCode)
+    },
+    async loadOrgData () {
+      const url = "/gov/org/agency/maporg"
+      let params = {
+        orgId: this.orgId,
+        level: this.orgLevel
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+
+        this.orgData = data
+        this.orgId = this.orgData.id
+        this.orgLevel = this.orgData.level
+        this.parentPolygon = []
+        this.parentPolygon = data.children.map(item => {
+          return {
+            ...item,
+            color: "#00E5ED",
+            fillColor: "rgba(0, 229, 237, 0.16)"
+          }
+        })
+
+      } else {
+        this.$message.error(msg)
+      }
+
+    },
+    // 获取当前管理员信息
+    getWorkUserInfo () {
+      const url = '/epmetuser/customerstaff/staffbasicinfo'
+      let params = {}
+      window.app.ajax.post(
+        url,
+        params,
+        (data, rspMsg) => {
+          this.agencyInfo = data
+          if (!data.latitude) {
+            this.agencyInfo.latitude = 36.072227
+          }
+          if (!data.longitude) {
+            this.agencyInfo.longitude = 120.389455
+          }
+          if (!data.level) {
+            this.agencyInfo.level = 'street'
+          }
+
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg)
+        }
+      )
+
+    },
+    // 获取位置信息
+    getMapData () {
+      const url = '/epmetuser/icVolunteerPoly/mapData'
+      let params = {
+        agencyId: this.agencyId,
+        code: this.eduCode
+      }
+      window.app.ajax.post(
+        url,
+        params,
+        (data, rspMsg) => { 
+          this.unitMapList = data
+          this.isfirstInit = false
+          this.loadMap()
+        },
+        (rspMsg, data) => {
+          this.$message.error(rspMsg)
+        }
+      )
+    },
+    //点击项目
+    async clickProject (feature) {
+      this.userId = ''
+      const featureInfo = feature.values_.properties.info
+      this.userId = feature.values_.properties.info.id
+      console.log('feature.values_.properties.info:::', JSON.stringify(feature.values_.properties.info))
+      let coordinate = [featureInfo.longitude, featureInfo.latitude]
+      console.log(feature.values_.properties.info)
+      let showData = `
+                <div style='font-size:16px; color:#FFFFFF;'>个人信息</div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:10px'>姓名：
+                  <span>`+ feature.values_.properties.info.name + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:10px'>所属网格：
+                  <span>`+ feature.values_.properties.info.gridName + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>所属房屋：
+                  <span>`+ feature.values_.properties.info.houseName + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>手机号：
+                  <span>`+ feature.values_.properties.info.mobile + `</span>
+                </div>
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>身份证号：
+                  <span>`+ feature.values_.properties.info.idCard + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>工作单位：
+                  <span>`+ feature.values_.properties.info.gzdw + `</span>
+                </div> 
+                <div style='font-size:12px; color:#FFFFFF;margin-top:5px'>人户状况：
+                  <span>`+ feature.values_.properties.info.rhzk + `</span>
+                </div>
+                `
+        this.$refs.map.handleShowPopup(showData, coordinate, true)
+    },
+    lookMore(e) {
+      this.userId = this.userId
+      console.log('userId:', this.userId)
+      this.showedMoreInfo = true
+    }
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  .title-icon {
+    display: block;
+    width: 46px;
+    height: 34px;
+    box-sizing: border-box;
+    margin-right: 6px;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 18px;
+    color: #fff;
+    font-weight: 800;
+  }
+  .title-time {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-left: 30px;
+    font-size: 14px;
+    color: #fff;
+    .title-time-label {
+      margin-right: 10px;
+    }
+    ::v-deep .el-date-editor--month {
+      width: 100px;
+      .el-input__inner {
+        width: 100px;
+        height: 24px;
+        box-sizing: border-box;
+        padding: 0;
+        font-size: 14px;
+        color: #fff;
+        line-height: 24px;
+        text-align: center;
+        background: #06186D;
+        border: 1px solid #1A64CC;
+        border-radius: 2px;
+      }
+      .el-input__prefix {
+        display: none;
+      }
+      .el-input__suffix {
+        right: 0;
+        .el-input__icon {
+          line-height: 24px;
+        }
+      }
+      
+    }
+  }
+  .title-label {
+    font-size: 20px;
+    font-weight: 800;
+    ::v-deep .el-input {
+      
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        // font-weight: 800;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+          content: "\e790";
+      }
+    }
+  }
+}
+.card-echart {
+  display: flex;
+  margin-top: 40px;
+  height: 100%;
+  .card-left {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    width: 50%;
+    .card-flex {
+      width: 100%;
+      display: flex;
+    }
+  }
+  .card-right {
+    position: relative;
+    flex: 1;
+    height: 790px;
+    width: 50%;
+    .map {
+      height: 100%;
+      width: 100%;
+    }
+    .div_map {
+        box-sizing: border-box;
+        height: 100%;
+        color: #fff;
+    }
+  }
+}
+.card-left-title {
+  position: relative;
+  padding-left: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+}
+.card-left-title::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-top: -6px;
+  background: #2865FA;
+  border-radius: 50%;
+}
+.echart-wr {
+  position: relative;
+  flex-shrink: 0;
+  width: 50%;
+  height: 320px;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 100%;
+  }
+  .echart-cicle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 240px;
+    height: 240px;
+    box-sizing: border-box;
+    margin-top: -120px;
+    margin-left: -120px;
+    border: 1px dashed rgba(0, 96, 240, 1);
+    border-radius: 50%;
+  }
+  .echart-cicle0 {
+    left: 80px;
+    margin-left: 0;
+  }
+}
+.echart-wr100 {
+  width: 70%;
+}
+.warning-box-bottom {
+  height: calc(100% - 500px);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 30px;
+  // overflow-y: scroll;
+}
+</style>
diff --git a/src/views/modules/visual/communityParty/memberInfo.vue b/src/views/modules/visual/communityParty/memberInfo.vue
new file mode 100644
index 00000000..55041b78
--- /dev/null
+++ b/src/views/modules/visual/communityParty/memberInfo.vue
@@ -0,0 +1,251 @@
+<template>
+  <div class="m-pop">
+    <div class="wrap">
+      <cpt-card>
+        <div class="title">
+          <img src="@/assets/img/shuju/title-tip.png" />
+          <span>需求内容</span>
+        </div>
+
+        <div class="btn-close" @click="handleClose">
+          <img src="@/assets/img/shuju/people/close.png" />
+        </div>
+        <div class="list-wr info-h">
+          <div class="list-left info-scroll">
+            <div v-for="(item, index) in list" :key="item.id" class="left-item" 
+            :class="current == index &&'left-item-on'" @click="handleTabs(item, index)">
+              <div class="item-title">{{ item.content }}</div>
+              <div class="item-time">{{ item.reportTime }}</div>
+            </div>
+          </div>
+          <div class="list-right list-wr info-scroll">
+            <div class="list">
+            
+              <div class="item">
+                <span class="item-field">所属网格：</span>
+                <span v-if="info.gridName">{{ info.gridName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">需求类型：</span>
+                <span v-if="info.categoryName">{{ info.categoryName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">上报人：</span>
+                <span v-if="info.reportUserName">{{ info.reportUserName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">上报人手机：</span>
+                <span v-if="info.reportUserMobile">{{ info.reportUserMobile }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">上报时间：</span>
+                <span v-if="info.reportTime">{{ info.reportTime }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">需求人：</span>
+                <span v-if="info.demandUserName">{{ info.demandUserName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">服务时间：</span>
+                <span v-if="info.wantServiceTime">{{ info.wantServiceTime }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">需求内容：</span>
+                <span v-if="info.content">{{ info.content }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">服务方：</span>
+                <span v-if="info.serviceShowName">{{ info.serviceShowName }}</span>
+              </div>
+              <div class="item">
+                <span class="item-field">实际服务时间：</span>
+                <span v-if="info.categoryName">{{ info.serviceStartTime }} 至 {{ info.serviceEndTime }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- <div class="tabs">
+          <div
+            class="tab-btn"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
+          </div>
+          <div
+            class="tab z-on"
+          >
+            研判分析
+          </div>
+          <div
+            class="tab-btn"
+          >
+            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
+          </div>
+        </div>
+
+        <div style="padding: 30px 0;">
+          <analyse :single-list="demandList" :single-title="'需求上报'" :more-title="'事件上报'" :user-list="userLists" 
+            :user-name="userName" :has-event="false" :more-list="eventList" />
+        </div> -->
+        
+        
+      </cpt-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import cptCard from "@/views/modules/visual/cpts/card";
+import analyse from '../cpts/analyse.vue'
+import { requestPost } from "@/js/dai/request";
+
+export default {
+  name: "dialogInfo",
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    type: {
+      type: String,
+      default: "",
+    },
+    agencyId: {
+      type: String,
+      default: "",
+    },
+  },
+
+  components: {
+    cptCard,
+    analyse
+  },
+
+  data() {
+    return {
+      list: [],
+      current: 0,
+      info: {}
+    };
+  },
+
+  
+  mounted() {
+  },
+
+  methods: {
+    handleClose() {
+      this.$emit("close");
+    },
+    handleTabs(item, index) {
+      this.current = index
+      this.getDetail(item.demandRecId)
+    },
+    async getDetail (id) {
+      this.info = {}
+      const _id = this.list[0].id
+      const url = "/heart/userdemand/demandDetail"
+      let params = {
+        demandRecId: id || _id
+      }
+
+      const { data, code, msg } = await requestPost(url, params)
+
+      if (code === 0) {
+        this.info = data
+        // this.info.serviceMatterNameShow = data.serviceMatterNameList.join(',')
+        // this.info.unitNameShow = data.unitNameList.join(',')
+      } else {
+        this.$message.error(msg)
+      }
+    },
+    
+  }
+};
+</script>
+
+<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
+<style lang="scss" scoped>
+.m-pop {
+  .wrap {
+    margin-bottom: 0;
+    .list {
+      display: block;
+      width: 50%;
+      .item {
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        margin-top: 0;
+        margin-bottom: 15px;
+        font-size: 16px;
+        cursor: pointer;
+        .item-field {
+          // width: 100px;
+          flex-shrink: 0;
+        }
+        .item-content {
+          width: 100%;
+          max-height: 420px;
+          overflow-y: auto;
+          
+        }
+        ::v-deep p {
+          margin: 0;
+          img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+      .item-desc {
+        font-size: 16px;
+        margin-bottom: 10px;
+        line-height: 24px;
+      }
+    }
+  }
+  .list-title {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 20px 0 10px 62px;
+      font-size: 20px;
+      cursor: pointer;
+    }
+}
+.list-wr {
+  display: flex;
+  padding: 0 32px;
+  
+}
+.list-left {
+  width: 180px;
+  height: 100%;
+  box-sizing: border-box;
+  padding-right: 20px;
+  flex-shrink: 0;
+  border-right: 1px dashed  #1257c9;
+  overflow: auto;
+  .left-item {
+    padding: 10px 0;
+    cursor: pointer;
+    .item-title {
+      font-size: 16px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-bottom: 5px;
+    }
+  }
+  .left-item-on {
+    color: #0095FF;
+  }
+}
+.list-right {
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+}
+
+
+</style>
diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue
index 56692699..e1490b41 100644
--- a/src/views/modules/visual/components/screen-map/index.vue
+++ b/src/views/modules/visual/components/screen-map/index.vue
@@ -32,6 +32,8 @@
          class="ol-popup-closer"></a>
       <div id="popup-content"
            class="popup-content"></div>
+      <a href="#" 
+         id="popup-goMore">更多>>>></a>
     </div>
   </div>
 </template>
@@ -668,6 +670,7 @@ const vueGis = {
       var container = document.getElementById("popup");
       var closer = document.getElementById("popup-closer");
       var content = document.getElementById("popup-content");
+      var goMore = document.getElementById("popup-goMore") ? document.getElementById("popup-goMore") : null
 
       // 创建一个弹窗 Overlay 对象
       this.overlay = new Overlay({
@@ -690,6 +693,11 @@ const vueGis = {
         closer.blur();
         return false;
       };
+      if (goMore) {
+        goMore.onclick = function () {
+          _that.$emit('lookMore')
+        };
+      }
     },
 
     //注册地图点击事件
@@ -721,7 +729,12 @@ const vueGis = {
       });
     },
 
-    handleShowPopup (showData, coordinate) {
+    handleShowPopup (showData, coordinate, isShowMore) {
+      if (isShowMore) {
+        document.getElementById("popup-goMore").style.display = 'block'
+      } else {
+        document.getElementById("popup-goMore").style.display = 'none'
+      }
       console.log(this.overlay.getElement())
       let content = document.getElementById("popup-content");
       this.overlay.getElement().style.display = 'block'

From 07f661906859cebec340e44538f0f2ae1b057202 Mon Sep 17 00:00:00 2001
From: Jackwang <wt373747285@163.com>
Date: Tue, 24 May 2022 15:57:40 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=85=9A=E5=91=98=E3=80=81=E7=BC=B4?=
 =?UTF-8?q?=E8=B4=B9=E8=AE=B0=E5=BD=95=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/communityParty/members/index.vue  | 91 ++++++++++---------
 .../icpartymemberpayrecorddetail.vue          | 46 +++++++++-
 2 files changed, 89 insertions(+), 48 deletions(-)

diff --git a/src/views/modules/communityParty/members/index.vue b/src/views/modules/communityParty/members/index.vue
index 7652d0fd..b5c67a72 100644
--- a/src/views/modules/communityParty/members/index.vue
+++ b/src/views/modules/communityParty/members/index.vue
@@ -107,32 +107,32 @@
       </div>
     </el-card>
     <el-card class="resi-card-table">
-      
+
       <div class="resi-row-btn">
         <el-button class="diy-button--add" size="small" @click="handleAdd">新增</el-button>
-        <!-- <el-button
-                   class="diy-button--export"
-                   size="small"
-                   @click="handleExportModule('room')">下载模板</el-button>
-        <el-upload
-          ref="upload"
-          class="upload-demo"
-          action="uploadUlr"
-          :limit="1"
-          :accept="'.xls,.xlsx'"
-          :with-credentials="true"
-          :show-file-list="false"
-          :auto-upload="true"
-          :on-success="handleExcelSuccess"
-          :before-upload="beforeExcelUpload"
-          :http-request="uploadHttpRequest"
-          >
-          <el-button size="small" class="diy-button--delete" :loading="importLoading">{{importBtnTitle}}</el-button>
-        </el-upload>
-        <el-button class="diy-button--reset" size="small" :loading="exportBtn" @click="handleExport">{{ exportBtnTitle }}</el-button> -->
-        
+<!--        <el-button-->
+<!--                   class="diy-button&#45;&#45;export"-->
+<!--                   size="small"-->
+<!--                   @click="handleExportModule('room')">下载模板</el-button>-->
+<!--        <el-upload-->
+<!--          ref="upload"-->
+<!--          class="upload-demo"-->
+<!--          action="uploadUlr"-->
+<!--          :limit="1"-->
+<!--          :accept="'.xls,.xlsx'"-->
+<!--          :with-credentials="true"-->
+<!--          :show-file-list="false"-->
+<!--          :auto-upload="true"-->
+<!--          :on-success="handleExcelSuccess"-->
+<!--          :before-upload="beforeExcelUpload"-->
+<!--          :http-request="uploadHttpRequest"-->
+<!--          >-->
+<!--          <el-button size="small" class="diy-button&#45;&#45;delete" :loading="importLoading">{{importBtnTitle}}</el-button>-->
+<!--        </el-upload>-->
+        <el-button class="diy-button--reset" size="small" :loading="exportBtn" @click="handleExport">{{ exportBtnTitle }}</el-button>
+
       </div>
-      
+
       <el-table
         :data="tableData"
         row-key="id"
@@ -294,7 +294,7 @@
       :close-on-click-modal="false"
       :before-close="handlerCancle"
     >
-      <crate-form v-if="dialogVisible" :info="detailInfo" :partyList="optionsG" 
+      <crate-form v-if="dialogVisible" :info="detailInfo" :partyList="optionsG"
       :disabled="disabled"
       @saveBase="handleSearch" @cancle="handlerCancle" />
     </el-dialog>
@@ -417,7 +417,7 @@ export default {
       partyProps: {
         label: 'partyOrgName',
         value: 'id',
-        checkStrictly: true 
+        checkStrictly: true
       }
     }
   },
@@ -444,17 +444,17 @@ export default {
       // this.getCateList('query')
       // this.getCateList('addorupdate')
     this.pageLoading = true
-    
+
     // this.tableHeight = document.documentElement.clientHeight - this.$refs.searchCard.$el.offsetHeight - 280 + 'px'
   },
-  
+
   mounted() {
-    
+
     this.$nextTick(() => {
       this.searchH = this.$refs.searchCard.$el.offsetHeight
       console.log('tableHeight', this.tableHeight)
     })
-    
+
   },
   methods: {
     handleSizeChange(val) {
@@ -540,11 +540,11 @@ export default {
       }
     },
     async handleExportModule () {
-      let url = "/resi/partymember/icpartymemberstyle/import/template-download"
-      
+      let url = "/resi/partymember/icPartyMember/import/template-download"
+
 
       let params = {}
-      
+
       await this.$http({
         method: 'POST',
         url,
@@ -556,7 +556,7 @@ export default {
           if (res.headers["content-disposition"]) {
             let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
             this.download(res.data, fileName)
-            
+
           } else this.$message.error('下载失败')
         })
         .catch(err => {
@@ -573,7 +573,7 @@ export default {
       if(!fileType) {
           this.$message.error('上传文件只能是xls/xlsx格式！')
       }
-      
+
       if (!isLt1M) {
         this.$message.error('上传文件大小不能超过 10MB!')
       }
@@ -590,7 +590,7 @@ export default {
       const formData = new FormData() //FormData对象，添加参数只能通过append('key', value)的形式添加
       formData.append('file', file.file) //添加文件对象
       this.$http
-        .post('/resi/partymember/icpartymemberstyle/import', formData).then(res => {
+        .post('/resi/partymember/icPartyMember/import', formData).then(res => {
           console.log('res-up', res)
           if (res.data.code == 0 && res.data.msg == 'success') {
             // this.$message.success('导入成功')
@@ -603,7 +603,7 @@ export default {
           file.onError() //上传失败的文件会从文件列表中删除
           // this.$message.error('导入失败')
         })
-      
+
       this.importLoading = false
       this.importBtnTitle = '导入'
       this.$refs.upload.clearFiles()
@@ -614,11 +614,12 @@ export default {
       let params = {
         agencyId: this.$store.state.user.agencyId,
         pageSize: 9999,
-        pageNo: this.currentPage
+        pageNo: this.currentPage,
+        ...this.searchForm
       }
       // .post('epmetuser/icresiuser/exportExcel', params)
       await axios({
-        url: window.SITE_CONFIG['apiURL'] + '/resi/partymember/icpartymemberstyle/export',
+        url: window.SITE_CONFIG['apiURL'] + '/resi/partymember/icPartyMember/export',
         // url: 'epmetuser/icresiuser/exportExcel',
         method: 'post',
         data: params,
@@ -685,7 +686,7 @@ export default {
       this.handleSearch()
     },
     handleAdd() {
-      
+
       this.dialogVisible = true
     },
 
@@ -703,7 +704,7 @@ export default {
       await this.getDetail(row.id)
       this.dialogVisible = true
     },
-    
+
     handleDel(row) {
       let params = {
         ids: [row.id]
@@ -753,7 +754,7 @@ export default {
             return this.$message.error(res.msg)
           } else {
             console.log('获取查询详情成功', res.data)
-            
+
             this.optionsG = this.deepArrTOnull(res.data)
           }
         })
@@ -786,7 +787,7 @@ export default {
             return this.$message.error(res.msg)
           } else {
             console.log('获取查询详情成功', res.data)
-            
+
             if (type === 'query') this.optionsC = res.data
             else this.optionsEditC = res.data
           }
@@ -819,7 +820,7 @@ export default {
         })
       this.tableLoading = false
     }
-    
+
   }
 }
 </script>
@@ -935,8 +936,8 @@ export default {
     text-align: center;
   }
 }
-  
-  
+
+
 
 .resi-btns {
   margin-top: 20px;
diff --git a/src/views/modules/partymember/icpartymemberpayrecorddetail.vue b/src/views/modules/partymember/icpartymemberpayrecorddetail.vue
index f6893f47..c45d7120 100644
--- a/src/views/modules/partymember/icpartymemberpayrecorddetail.vue
+++ b/src/views/modules/partymember/icpartymemberpayrecorddetail.vue
@@ -71,7 +71,7 @@
       </el-card>
       <el-card class="resi-card-table">
         <div class="resi-row-btn">
-          <el-button type="warning" size="small" class="diy-button--reset" @click="exportHandle()">{{ $t('export') }}</el-button>
+          <el-button type="warning" size="small" :loading="exportBtn" class="diy-button--reset" @click="exportHandle()">{{ $t('export') }}</el-button>
         </div>
       <el-table class="resi-table" v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
         <!--<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
@@ -111,8 +111,9 @@
 </template>
 
 <script>
-    import mixinViewModule from '@/mixins/view-module'
-    import AddOrUpdate from './icpartymemberpayrecorddetail-add-or-update'
+  import axios from 'axios'
+  import mixinViewModule from '@/mixins/view-module'
+  import AddOrUpdate from './icpartymemberpayrecorddetail-add-or-update'
 
     export default {
   mixins: [mixinViewModule],
@@ -124,6 +125,8 @@
         deleteURL: '/resi/partymember/icPartyMemberPayRecordDetail',
         deleteIsBatch: true
       },
+      exportBtn: false,
+      exportBtnTitle: '导出',
       dataForm: {
         id: '',
         name: '',
@@ -158,6 +161,43 @@
       this.getOrgList()
   },
   methods: {
+      async exportHandle() {
+        this.exportBtn = true
+        this.exportBtnTitle = '正在导出...'
+        let params = {
+          agencyId: this.$store.state.user.agencyId,
+          pageSize: 9999,
+          pageNo: this.currentPage,
+          ...this.dataForm
+        }
+        await axios({
+          url: window.SITE_CONFIG['apiURL'] + '/resi/partymember/icPartyMemberPayRecordDetail/export',
+          method: 'post',
+          data: params,
+          responseType: 'blob'
+        })
+          .then(res => {
+            console.log('resllll', res)
+            let fileName = window.decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1])
+            console.log('filename', fileName)
+            let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
+            var url = window.URL.createObjectURL(blob)
+            var aLink = document.createElement('a')
+            aLink.style.display = 'none'
+            aLink.href = url
+            aLink.setAttribute('download', fileName)
+            document.body.appendChild(aLink)
+            aLink.click()
+            document.body.removeChild(aLink) //下载完成移除元素
+            window.URL.revokeObjectURL(url) //释放掉blob对象
+          })
+          .catch((err) => {
+            console.log('获取导出情失败', err)
+            this.$message.error('获取导出失败')
+          })
+        this.exportBtn = false
+        this.exportBtnTitle = '导出'
+      },
       resetForm(formName) {
           for(const n in this.dataForm) {
               this.dataForm[n] = ''