调试撒点弹窗详情

.gitignore

@@ -3,3 +3,27 @@ node_modules
 dist
 dist-ssr
 *.local
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+.idea
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

-# huamu
+# 花木街道数字孪生城市
 
-花木街道数字孪生城市
-
-## Use
+## Usage
 
 ```bash
 # install dependencies

src/ajax/api.ts

@@ -18,11 +18,10 @@ switch (process.env.NODE_ENV) {
   case 'production':
     BASE_URL = 'https://www.maicedata.com/collector/data/' // 生产环境
     TOKEN = getToken()
-
-    // TODO 生产环境地图链接？？
     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',
+      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',
     }
     break
   default:
@@ -32,11 +31,17 @@ 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 {
   TOKEN,
   BASE_URL,
+  MAP_CONFIG,
   ORGANIZATION: '733d0ac0-f67e-4bde-8872-3ca00983f18c',
   MEMBER: '6c18d1b6-406e-4961-965c-c4b9cfc14cc4',
   ACTIVITY: 'e6659af9-d53c-4b3f-9719-465d02687933',

src/hooks/useInitMap.ts

@@ -2,13 +2,16 @@ import { onUnmounted } from 'vue'
 import * as esriloader from 'esri-loader'
 import useJsApi from '@/hooks/useJsApi'
 import sceneViewPopup from '@/util/sceneViewPopup'
-import { transOrgHtml, transMemberHtml, transListHtml } from '@/util/data2html'
+import {
+  transOrgHtml,
+  transMemberHtml,
+  transListHtml,
+  transActivityHtml,
+} from '@/util/data2html'
+import { api } from '@/ajax'
 
 export default async function useInitMap(el: HTMLElement, camera: any) {
-  const 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',
-  }
+  const config = api.MAP_CONFIG
   let map: any = null
   let sceneView: any = null
   let graphiclayer: any = null
@@ -105,15 +108,16 @@ export default async function useInitMap(el: HTMLElement, camera: any) {
   // const layerListExpand = new Expand({
   //   expandTooltip: '图层控制',
   //   view: window.sceneView,
-  //   content: layerList,
+  //   content: [layerList],
   // })
   // window.sceneView.ui.add([layerListExpand], 'top-right')
-  // window.sceneView.ui.remove([
-  //   'zoom',
-  //   'navigation-toggle',
-  //   'attribution',
-  //   'compass',
-  // ])
+  window.sceneView.ui.add([], 'top-right')
+  window.sceneView.ui.remove([
+    'zoom',
+    'navigation-toggle',
+    'attribution',
+    'compass',
+  ])
 
   const baseLayer = new TileLayer(
     'http://10.108.3.48/changsanjiao/rest/services/Hosted/Base_Map/MapServer',
@@ -204,12 +208,15 @@ function addEventListener() {
           layerView
             .queryFeatures(query)
             .then(function ({ features }) {
+              console.log('features', features)
               if (!features || features.length === 0) return
               let html = ''
               const title = ''
 
-              const data = features[0]?.attributes // TODO 判断依据取值？
+              let data = features[0]?.attributes
+              data = data.json && JSON.parse(data.json)
               if (data?.['活动名称']) {
+                html = transActivityHtml(data)
               } else if (data?.['姓名']) {
                 html = transMemberHtml(data)
               } else if (data?.['党组织名称']) {

src/store/mutations.ts

@@ -15,6 +15,9 @@ export default {
   SET_SHOW_TAG(state: GlobalStateProps, val: boolean) {
     state.showTag = val
   },
+  SET_CUR_TAG(state: GlobalStateProps, val: string) {
+    state.curTag = val
+  },
   SET_SHOW_BASIC_INFO(state: GlobalStateProps, val: boolean) {
     state.showBasicInfo = val
   },

src/store/state.ts

@@ -6,6 +6,7 @@ export default {
     code: '',
   },
   showTag: true,
+  curTag: '',
   showBasicInfo: true,
   showFilterDrawer: false,
   showActivityDrawer: false,

src/util/clientLayersOperate.ts

@@ -31,9 +31,13 @@ export default {
         y: item['上海2000纬度'],
         spatialReference: SpatialReference.WebMercator,
       })
+      console.log('item', item)
       return new Graphic({
         geometry: point,
-        attributes: { ...item }, // TODO 把数据塞入点位中？
+        attributes: {
+          ...item,
+          json: JSON.stringify(item),
+        },
       })
     })
 
@@ -98,13 +102,18 @@ export default {
         alias: 'OBJECTID',
         type: 'oid',
       },
+      {
+        name: 'json',
+        alias: 'json',
+        type: 'string',
+      },
     ]
 
     Object.keys(Parameters.result[0]).forEach((item) => {
       const field = {
         name: item,
         alias: item,
-        type: 'string',
+        type: Array.isArray(item) ? 'array' : 'string',
       }
       fields.push(field)
     })
@@ -114,6 +123,7 @@ export default {
       clientOperateLayer = new FeatureLayer({
         id: layerName,
         title: layerName,
+        outFields: ['*'],
         objectIdField: 'OBJECTID',
         geometryType,
         renderer: renderer,

src/util/data2html.ts

@@ -17,11 +17,10 @@ const transAddress = (a: string, b: string, c: string) => {
 const style = `
 <style>
   .pop-container {
-    background: rgba(249,250,250,.9);
     border-radius: .04rem;
     box-sizing: border-box;
     padding: .1rem;
-    width: 3rem;
+    width: 100%;
   }
   .title {
     font-size: .13rem;
@@ -121,6 +120,7 @@ const style = `
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    font-size: .1rem;
   }
   .pop-container .wrapper > .item p {
     font-family: PingFangMedium, 'Avenir', Helvetica, Arial, sans-serif;
@@ -284,9 +284,9 @@ export const transActivityHtml = (data: any) => {
         <div class="box">
           <div>
             <span>活动照片</span>
-            <p>${data['活动照片']
-              .map((item) => `<img src="${item}"/>`)
-              .join('')}</p>
+            <p>${(data?.['活动照片'] || [])
+              ?.map((item) => `<img src="${item}"/>`)
+              ?.join('')}</p>
           </div>
         </div>
       </div>
@@ -301,6 +301,8 @@ export const transListHtml = (data: any) => {
     pointName = '活动'
   } else if (list[0]['党组织名称']) {
     pointName = '党组织'
+  } else if (list[0]['姓名']) {
+    pointName = '党员'
   }
   return `
     ${style}
@@ -310,8 +312,13 @@ export const transListHtml = (data: any) => {
           ${list
             .map(
               (item: any) => `<div class="item" >
-              <p>${item['活动名称'] || item['党组织名称']}</p>
-              <span>${item['活动地址'] || item['党组织地址'] || '无'}</span>
+              <p>${item['活动名称'] || item['党组织名称'] || item['姓名']}</p>
+              <span>${
+                item['活动地址'] ||
+                item['党组织地址'] ||
+                item['所属党组织名称'] ||
+                '无'
+              }</span>
             </div>
           `,
             )

src/view/components/basic-info.vue

@@ -104,7 +104,7 @@
 
 <script lang="ts" setup>
 import { ChartTypes } from '@/components/MyComponent'
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { CaretForward } from '@vicons/ionicons5'
 import { useFetchOrg } from '@/hooks/useFetch'
 import store from '@/store'
@@ -183,23 +183,37 @@ const tagList = [
   { name: '居民区党组织', key: '居民区' },
   { name: '“两新”党组织', key: '两新' },
 ]
+
+watch(
+  () => visible.value,
+  (visible) => {
+    if (!visible) {
+      curTagKey.value = null
+      store.commit('SET_MAP_POINTS')
+      store.commit('SET_CUR_TAG', '')
+    }
+  },
+)
 const clickTag = async (key: string) => {
   if (key === curTagKey.value) {
     curTagKey.value = null
     store.commit('SET_MAP_POINTS')
+    store.commit('SET_CUR_TAG', '')
     return
   }
   curTagKey.value = key
+  if (!store.state.showFilterDrawer) {
     const res = await useFetchOrg({
       q: `paths @ "类别" && string == "${key}"`,
     })
-  console.log(`类别-${key}-撒点：`, res)
     store.commit(
       'SET_MAP_POINTS',
       res
         .map((item: any) => item.extra)
         .filter((item: any) => !item?.['是否虚拟组织']),
     )
+  }
+  store.commit('SET_CUR_TAG', key)
 }
 </script>
 

src/view/components/building-drawer.vue

@@ -145,6 +145,7 @@ const back = () => {
   showBuildingDetail.value = false
   curBuilding.value = null
   store.commit('SET_BUILDING_DRAWER', false)
+  store.commit('SET_SHOW_TAG', true)
 }
 const closeDrawer = () => {
   back()

src/view/components/filter-drawer.vue

@@ -192,6 +192,7 @@ const close = () => {
   store.dispatch('getBasicInfo')
   store.commit('SET_FILTER_DRAWER', false)
   store.commit('SET_SHOW_TAG', true)
+  store.commit('SET_CUR_TAG', '')
   reset()
   emit('close')
   // TODO 清除撒点
@@ -377,7 +378,6 @@ watch(
         })),
       )
     })
-    console.log('标签筛选撒点数据：', pointData)
     store.commit('SET_MAP_POINTS', pointData)
   },
   { deep: true },
@@ -422,16 +422,19 @@ const committeeNext = async (name: string) => {
 
 const buildingList = ref([])
 const getBuildings = async (name: string) => {
-  buildingList.value = (
+  buildingList.value =
+    (
       await useFetchBuilding({
         q: `paths @ "楼宇名称" && string @ "${name}"`,
       })
-  ).map((item: any) => item.extra)
+    )?.map((item: any) => item.extra) || []
+  store.commit('SET_MAP_POINTS', buildingList.value)
 }
 const communityNext = async (name: string) => {
   await getBuildings(name)
   setCommunity(name, true)
   store.commit('SET_BUILDING_DRAWER', true)
+  store.commit('SET_SHOW_TAG', false)
 }
 const toPreStep = () => {
   if (curGeo.value === '小区') {
@@ -508,6 +511,11 @@ watch(
   [() => curArea.value, () => curCommittee.value, () => curCommunity.value],
   async ([area, committee, community]) => {
     checkPathThenFetchInfo()
+    const { curTag } = store.state
+    let query = ''
+    if (curTag) {
+      query = `,paths @ "类别" && string == "${curTag}"`
+    }
     let points: any[] = []
     if (community) {
       emit('boundary', { type: 'community', name: community })
@@ -515,7 +523,7 @@ watch(
       points =
         (
           await useFetchOrg({
-            q: `paths @ "所属居委" && string == "${committee}"`,
+            q: `paths @ "所属居委" && string == "${committee}"` + query,
           })
         )?.map((item: any) => item.extra) || []
       emit('boundary', { type: 'committee', name: committee })
@@ -523,7 +531,7 @@ watch(
       points =
         (
           await useFetchOrg({
-            q: `paths @ "所属社区" && string == "${area}"`,
+            q: `paths @ "所属社区" && string == "${area}"` + query,
           })
         )?.map((item: any) => item.extra) || []
       emit('boundary', { type: 'area', name: area })
@@ -532,6 +540,34 @@ watch(
     store.commit('SET_MAP_POINTS', points)
   },
 )
+watch(
+  () => store.state.curTag,
+  async (tag) => {
+    let query = ''
+    if (tag) {
+      query = `,paths @ "类别" && string == "${tag}"`
+    }
+    const area = curArea.value
+    const committee = curCommittee.value
+    let points: any[] = []
+    if (committee) {
+      points =
+        (
+          await useFetchOrg({
+            q: `paths @ "所属居委" && string == "${committee}"` + query,
+          })
+        )?.map((item: any) => item.extra) || []
+    } else if (area) {
+      points =
+        (
+          await useFetchOrg({
+            q: `paths @ "所属社区" && string == "${area}"` + query,
+          })
+        )?.map((item: any) => item.extra) || []
+    }
+    store.commit('SET_MAP_POINTS', points)
+  },
+)
 </script>
 
 <style lang="stylus" scoped>

src/view/components/list-modal.vue

@@ -64,7 +64,6 @@ const toInt = () => {
 const fetchPage = useDebounce(() => {
   // TODO
   toInt()
-  console.log('----', curPage.value)
 })
 const prePage = () => {
   curPage.value -= 1

src/view/components/map.vue

@@ -145,7 +145,6 @@ async function queryBound(layerId: number, name: string) {
   }
 
   queryTask.execute(query).then(function (results: any) {
-    // console.log(results.features);
     results.features[0].symbol = {
       type: 'simple-fill',
       color: [221, 80, 94, 0.2],

src/view/components/new-activity-drawer.vue

@@ -499,6 +499,12 @@ const rules: FormRules = {
       message: '不能大于党员总数',
       trigger: ['blur', 'input'],
     },
+    {
+      type: 'number',
+      validator: (_, val) => val + memberData.value.count <= totalPerson.value,
+      message: '与实际参与人数之合不能大于党员总数',
+      trigger: ['blur', 'input'],
+    },
   ],
   fileType: [
     {
@@ -671,7 +677,6 @@ function beforeUpload(options: any) {
 }
 
 async function onFileChange(options: any, type: string) {
-  console.log('change', options, type)
   if (!options) return
   if (!options.event) {
     // 删除

src/view/main.vue

@@ -12,11 +12,8 @@
   <StructModal />
 
   <!-- <InforModal class="fix1" /> -->
-  <ListModal class="fix1" />
+  <!-- <ListModal class="fix1" /> -->
   <!-- <ActivityDetail class="fix1" /> -->
-  <div class="fix2">
-    <div v-html="html" />
-  </div>
 </template>
 
 <script lang="ts" setup>
@@ -32,19 +29,16 @@ import ListModal from './components/list-modal.vue'
 import ActivityDetail from './components/activity-detail.vue'
 import reset from '@images/reset.svg'
 import store from '@/store'
-import {
-  transOrgHtml,
-  transMemberHtml,
-  transListHtml,
-  transActivityHtml,
-} from '@/util/data2html'
 
 store.dispatch('getAuth')
 store.dispatch('getMenus')
 
 const showReset = computed(() => store.state.showBasicInfo)
 const map = ref<any>()
-const resetMap = () => map.value && map.value.resetMap()
+const resetMap = () => {
+  map.value && map.value.resetMap()
+  store.commit('SET_MAP_POINTS')
+}
 const setBoundary = ({ type, name }: { type: string; name: string }) => {
   if (!map.value) return
   switch (type) {
@@ -64,30 +58,6 @@ const setBoundary = ({ type, name }: { type: string; name: string }) => {
       break
   }
 }
-const html = transActivityHtml({
-  出席率: 67,
-  标签类别: '主题党日活动',
-  活动名称: '牡丹活动',
-  活动地址:
-    '中共浦东新区花木街道牡丹社区第一居民区第一支部委员会中共浦东新区花木街道牡丹社区第一居民区第一支部委员会',
-  活动日期: 1632240000,
-  活动照片: [
-    'http://mdt-open-public.oss-cn-hangzhou.aliyuncs.com/collector/988fc63e-fa55-4729-851d-24c4355213f2/huamu_a3a63d618b9464b87c0691a77f4274c3_%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202021-09-15%20%E4%B8%8A%E5%8D%8811.30.47.png',
-    'http://mdt-open-public.oss-cn-hangzhou.aliyuncs.com/collector/988fc63e-fa55-4729-851d-24c4355213f2/huamu_a3a63d618b9464b87c0691a77f4274c3_%E5%B1%8F%E5%B9%95%E5%BF%AB%E7%85%A7%202021-09-15%20%E4%B8%8A%E5%8D%8811.30.47.png',
-  ],
-  党组织名称: '中共浦东新区花木街道牡丹社区第一居民区第一支部委员会',
-  党组织编号: '001.001.031.014.205.002.001.601.701',
-  签到表文件: [
-    'http://mdt-open-public.oss-cn-hangzhou.aliyuncs.com/collector/988fc63e-fa55-4729-851d-24c4355213f2/huamu_87f69f9e37eab53fd2e974adbb36cfc9_%E8%8E%B7%E5%BE%97%E5%8C%BA%E7%BA%A7%E5%A5%96%E9%A1%B9%E5%85%9A%E7%BB%84%E7%BB%87.xlsx',
-  ],
-  签到表照片: [],
-  上海2000纬度: -2581.95914975792,
-  上海2000经度: 7037.33995731356,
-  台账记录照片: [],
-  实际参与人数: 40,
-  活动内容描述: '描述',
-  不计入参与活动党员人数: 3,
-})
 
 // 塞入统一标题字段名_labelKey,  收集同一坐标点位
 function checkSamePositionPoints(arr: any[]) {
@@ -120,7 +90,11 @@ function checkSamePositionPoints(arr: any[]) {
       }
     } else {
       return {
-        _labelKey: item['党组织名称'] ? '党组织名称' : '姓名',
+        _labelKey: item['党组织名称']
+          ? item['党组织名称']
+          : item['号']
+          ? item['号']
+          : item['姓名'],
         ...item,
       }
     }
@@ -131,12 +105,11 @@ watch(
   () => store.state.mapPoints,
   (points: any) => {
     map.value.clearPoints()
-    console.log('开始撒点：')
     if (!points || points.length === 0) return
     const data = checkSamePositionPoints(
       points.map((point) => JSON.parse(JSON.stringify(point))) || [],
     )
-    console.log(data)
+    console.log('开始撒点：', data)
     map.value.addPoints('撒点', data)
   },
 )