列表弹窗点击展示详情

31a5033e · 郭铭瑶 · e06eb892 · 31a5033e · 31a5033e · 31a5033e
Commit 31a5033e authored Sep 22, 2021 by 郭铭瑶 🤘
12 changed files
--- a/.env.production
+++ b/.env.production
+NODE_ENV = production
\ No newline at end of file
--- a/.env.sit
+++ b/.env.sit
+NODE_ENV = sit
\ No newline at end of file
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
  "scripts": {
    "dev": "vite",
    "start": "npm run dev",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vue-tsc --noEmit && vite build --mode production",
+    "build:sit": "vue-tsc --noEmit && vite build --mode sit",
    "serve": "vite preview"
  },
  "dependencies": {

--- a/src/ajax/api.ts
+++ b/src/ajax/api.ts
@@ -24,6 +24,14 @@ switch (process.env.NODE_ENV) {
        'http://10.108.3.48/api418/arcgis_js_api/library/4.18/esri/css/main.css',
    }
    break
+  case 'sit':
+    BASE_URL = 'https://survey.maicedata.com/api/data/' // 测试环境（暂时部署在测绘院用）
+    TOKEN = '91e315a9-b2a8-4950-97fa-9dbf84a230d6'
+    MAP_CONFIG = {
+      jsApiUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/init.js',
+      cssUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/esri/css/main.css',
+    }
+    break
  default:
    BASE_URL = '/api' // vite.config 代理 https://survey.maicedata.com/api/data/
    TOKEN = '91e315a9-b2a8-4950-97fa-9dbf84a230d6'
@@ -31,11 +39,6 @@ switch (process.env.NODE_ENV) {
      jsApiUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/init.js',
      cssUrl: 'http://10.108.3.41/arcgis_js_api/library/4.18/esri/css/main.css',
    }
-  // MAP_CONFIG = {
-  //   jsApiUrl: 'http://10.108.3.48/api418/arcgis_js_api/library/4.18/init.js',
-  //   cssUrl:
-  //     'http://10.108.3.48/api418/arcgis_js_api/library/4.18/esri/css/main.css',
-  // }
 }

 export default {

--- a/src/hooks/useInitMap.ts
+++ b/src/hooks/useInitMap.ts
@@ -208,13 +208,13 @@ function addEventListener() {
          layerView
            .queryFeatures(query)
            .then(function ({ features }) {
-              console.log('features', features)
              if (!features || features.length === 0) return
              let html = ''
              const title = ''

              let data = features[0]?.attributes
-              data = data.json && JSON.parse(data.json)
+              data.json && (data = JSON.parse(data.json))
+              console.log('click data: ', data)
              if (data?.['活动名称']) {
                html = transActivityHtml(data)
              } else if (data?.['姓名']) {

--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -19,7 +19,7 @@ export default {
  /** 获取权限编码 */
  async getAuth({ commit }: Method) {
    if (process.env.NODE_ENV !== 'production') {
-      /* 开发环境 测试用 */
+      /* 开发环境、测试环境用 */
      commit('SET_AUTH', {
        userid: 91541,
        orgid: '000001',

--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -59,5 +59,5 @@ export default {
  },
  filterPath: '', // 地理筛选路径
  mapPoints: [{}],
-  menus: [],
+  menus: [] as { key: string; name: string; children?: any[] }[],
 }
--- a/src/util/clientLayersOperate.ts
+++ b/src/util/clientLayersOperate.ts
@@ -31,7 +31,6 @@ export default {
        y: item['上海2000纬度'],
        spatialReference: SpatialReference.WebMercator,
      })
-      console.log('item', item)
      return new Graphic({
        geometry: point,
        attributes: {

--- a/src/util/data2html.ts
+++ b/src/util/data2html.ts
 import { organization, member } from '@/util/tags'
 import switchOrgLevel from '@/util/switchOrgLevel'
 import dayjs from 'dayjs'
+// import useExportXlsx from '@/hooks/useExportXlsx'

 const trans = (val: string) => {
  if (!val) return '无'
@@ -58,6 +59,7 @@ const style = `
    color: #AC60CA;
    background: #F5F0F9;
  }
+  .flex,
  .box {
    background: #fcfcfc;
    border-radius: .03rem;
@@ -65,35 +67,40 @@ const style = `
    box-sizing: border-box;
    padding: .1rem;
  }
-  .box.flex {
+  .flex {
    display: flex;
    flex-wrap: wrap;
  }
-  .box.inline > div {
+  .box > .inline {
    display: flex;
+    align-items: center;
  }
-  .box.inline > div > span {
+  .box > .inline > span {
    width: 25%;
    white-space: nowrap;
  }
-  .box.flex > div {
+  .flex > div {
    margin-right: .05rem;
  }
-  .box.flex > div:nth-of-type(1),
-  .box.flex > div:nth-of-type(4) {
+  .flex > div:nth-of-type(1),
+  .flex > div:nth-of-type(3),
+  .flex > div:nth-of-type(4) {
    width: 25%;
  }
-  .box.flex > div:nth-of-type(2),
-  .box.flex > div:nth-of-type(5) {
+  .flex > div:nth-of-type(2),
+  .flex > div:nth-of-type(5) {
    width: 40%;
  }
+  .flex span,
  .box span {
    color: rgba(0,0,0,.6);
  }
+  .flex p,
  .box p {
    margin-bottom: .03rem;
    font-family: PingFangMedium, 'Avenir', Helvetica, Arial, sans-serif;
  }
+  .flex img,
  .box img {
    width: 25%;
  }
@@ -101,7 +108,7 @@ const style = `
    max-height: 50vh;
    padding-bottom: .1rem;
    margin-top: .05rem;
-    overflow-y:auto;
+    // overflow-y:auto;
    border-top: .01rem solid rgba(0,0,0,.06);
  }
  .pop-container .wrapper > .item {
@@ -171,7 +178,7 @@ export const transOrgHtml = (data: any) => {
      <p class="title">${data?.['党组织名称']}</p>
      ${getOrgTags(data?.['标签'])}
      <p>${data['党组织地址']}</p>
-      <div class="box flex">
+      <div class="flex">
        <div>
          <span>${switchOrgLevel(data, '书记')}</span>
          <p>${data['书记']}</p>
@@ -206,7 +213,7 @@ export const transMemberHtml = (data: any) => {
      <p class="title">${data['姓名']}</p>
      ${getMemberTags(data?.['标签'])}
      <p>${data['所属党组织名称']}</p>
-      <div class="box flex">
+      <div class="flex">
        <div>
          <span>性别</span>
          <p>${data['性别']}</p>
@@ -251,6 +258,26 @@ export const transMemberHtml = (data: any) => {
 }

 export const transActivityHtml = (data: any) => {
+  // const mock = [
+  //   {
+  //     出席率: 67,
+  //     标签类别: '主题党日活动',
+  //     活动名称: '牡丹活动',
+  //     活动地址:
+  //       '中共浦东新区花木街道牡丹社区第一居民区第一支部委员会中共浦东新区花木街道牡丹社区第一居民区第一支部委员会',
+  //     活动日期: 1632240000,
+  //     党组织名称: '中共浦东新区花木街道牡丹社区第一居民区第一支部委员会',
+  //     党组织编号: '001.001.031.014.205.002.001.601.701',
+  //     签到表照片: [],
+  //     上海2000纬度: -2581.95914975792,
+  //     上海2000经度: 7037.33995731356,
+  //     台账记录照片: [],
+  //     实际参与人数: 40,
+  //     活动内容描述: '描述',
+  //     不计入参与活动党员人数: 3,
+  //   },
+  // ]
+
  return `
    ${style}
    <div class="pop-container">
@@ -304,6 +331,78 @@ export const transListHtml = (data: any) => {
  } else if (list[0]['姓名']) {
    pointName = '党员'
  }
+  const template = (data: any) => {
+    switch (pointName) {
+      case '活动':
+        return `<p class=${'title'}>${data['活动名称']}</p><p>${
+          data['党组织名称']
+        }</p><div class=${'wrapper'}><div class=${'box'}><div class=${'inline'}><span>活动日期：</span><p>${dayjs(
+          +(data['活动日期'] + '000'),
+        ).format(
+          'll',
+        )}</p></div><div class=${'inline'}><span>活动地址：</span><p>${
+          data['活动地址']
+        }</p></div><div class=${'inline'}><span>参与人数：</span><p>${
+          data['实际参与人数']
+        }人</p></div><div class=${'inline'}><span>出席率：</span><p>${
+          data['出席率']
+        }%</p></div></div><div class=${'box'}><div><span>活动内容描述</span><p>${
+          data['活动内容描述'] || '无'
+        }</p></div></div><div class=${'box'}><div><span>活动照片</span><p>${(
+          data?.['活动照片'] || []
+        )
+          ?.map((e) => `<img src=${e}>`)
+          ?.join('')}</p></div></div></div>`
+      case '党组织':
+        return `<p class=${'title'}>${data?.['党组织名称']}</p>${getOrgTags(
+          data?.['标签'],
+        )}<p>${
+          data['党组织地址']
+        }</p><div class=${'flex'}"><div><span>${switchOrgLevel(
+          data,
+          '书记',
+        )}</span><p>${data['书记']}</p></div><div><span>党员数量</span><p>${
+          data['党员数量'] || '无'
+        }</p></div></div><div class=${'box'}><div><span>${switchOrgLevel(
+          data,
+          '副书记',
+        )}</span><p>${
+          data['副书记'] || '无'
+        }</p></div><div><span>上级党组织名称</span><p>${
+          data['上级党组织名称'] || '无'
+        }</p></div><div><span>联系电话</span><p>${trans(
+          data['联系方式_座机'] || data['联系方式_手机'],
+        )}</p></div></div>`
+      case '党员':
+        return `<p class=${'title'}>${data['姓名']}</p>${getMemberTags(
+          data?.['标签'],
+        )}<p>${
+          data['所属党组织名称']
+        }</p><div class=${'flex'}><div><span>性别</span><p>${
+          data['性别']
+        }</p></div><div><span>出生日期</span><p>${dayjs(
+          data['出生日期'],
+        ).format('ll')}</p></div><div><span>学历</span><p>${
+          data['学历'] || '无'
+        }</p></div><div><span>党员身份</span><p>${
+          data['党员身份']
+        }</p></div><div><span>入党日期</span><p>${dayjs(
+          data['加入中共党组织日期'],
+        ).format(
+          'll',
+        )}</p></div></div><div class=${'box'}><div><span>身份证号码</span><p>${trans(
+          data['身份证号码'],
+        )}</p></div><div><span>居住地址</span><p>${transAddress(
+          data['所属小区'],
+          data['所属楼宇'],
+          data['所属房间'],
+        )}</p></div><div><span>联系电话</span><p>${trans(
+          data['联系方式_手机'],
+        )}</p></div></div>`
+      default:
+        break
+    }
+  }
  return `
    ${style}
      <div class="pop-container">
@@ -311,7 +410,11 @@ export const transListHtml = (data: any) => {
        <div class="wrapper">
          ${list
            .map(
-              (item: any) => `<div class="item" >
+              (
+                item: any,
+              ) => `<div class="item" onclick="(function(){document.querySelector('.pop-container').innerHTML = '${template(
+                item,
+              )}'})()">
              <p>${item['活动名称'] || item['党组织名称'] || item['姓名']}</p>
              <span>${
                item['活动地址'] ||

--- a/src/view/components/activity-drawer.vue
+++ b/src/view/components/activity-drawer.vue
@@ -100,6 +100,7 @@ const closeDrawer = () => {
  store.commit('SET_SHOW_TAG', true)
  dateRange.value = []
  store.commit('SET_MAP_POINTS')
+  list.value.forEach((item) => (item.onMap = false))
 }

 const dateRange = ref<number[]>([])

--- a/src/view/components/nav-bar.vue
+++ b/src/view/components/nav-bar.vue
@@ -73,7 +73,7 @@
          </div>
          <div class="children">
            <div
-              v-for="(child, i) in curMenu.children"
+              v-for="(child, i) in curMenu?.children || []"
              :key="i"
              :class="{ child: !child.list }"
            >

--- a/src/view/components/struct-modal.vue
+++ b/src/view/components/struct-modal.vue
@@ -235,7 +235,7 @@
              </div>
              <div
                v-else-if="
-                  curKey.split('-').length === 3 && curMenu && curMenu._hasSub
+                  curKey?.split('-').length === 3 && curMenu && curMenu._hasSub
                "
                class="card"
              >
@@ -292,11 +292,11 @@
              </div>
              <template
                v-else-if="
-                  ((curKey.startsWith('2') ||
-                    curKey.startsWith('3') ||
-                    curKey.startsWith('4')) &&
-                    curKey.split('-').length === 2) ||
-                  (curKey.split('-').length === 3 &&
+                  ((curKey?.startsWith('2') ||
+                    curKey?.startsWith('3') ||
+                    curKey?.startsWith('4')) &&
+                    curKey?.split('-').length === 2) ||
+                  (curKey?.split('-').length === 3 &&
                    (!curMenu || !curMenu._hasSub)) ||
                  onlyOne
                "