update

src/views/win/inwaterParts/addressIndex.vue

@@ -22,7 +22,13 @@
             </el-col>
           </el-col>
           <el-col :span="24" class="mapList">
-            <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
+            <el-col
+              :span="24"
+              class="list"
+              v-for="(item, index) in list"
+              :key="index"
+              @click="toMove(item)"
+            >
               <el-col :span="24" class="title">
                 {{ item.title }}
               </el-col>
@@ -54,64 +60,49 @@ import { onMounted, onUnmounted, ref } from 'vue'
 import AMapLoader from '@amap/amap-jsapi-loader'
 
 import dividerIndex from '../../../components/windows/dividerIndex.vue'
+import { get } from 'lodash-es'
 
 const map = ref()
+const toMove = (data: object) => {
+  const pos = get(data, 'pos', [])
+  map.value.setZoomAndCenter(18, pos, false, 300)
+}
 
 const tabList = ref([
   {
     id: '1',
     title: '供水服务公司',
+    list: 'gsfwgsList',
   },
   {
     id: '2',
     title: '二次供水',
+    list: 'ecgsList',
   },
   {
     id: '3',
     title: '客服服务中心',
+    list: 'kffwzxList',
   },
 ])
 const tabAcitve = ref('1')
 /* 选项卡选择 */
 const tabChange = (event: { id: string }) => {
   tabAcitve.value = event.id
+  const tab = tabList.value.find((f) => f.id == event.id)
+  if (!tab) return
+  const listName = get(tab, 'list')
+  if (!listName) return
+  const viewList = get(allList, `value.${listName}`, [])
+  list.value = viewList
 }
 
 /*  */
-const list = ref([
-  {
-    title: '朝阳区供水服务分公司',
-    address: '建设街2778号',
-    mobile: '82828282',
-  },
-  {
-    title: '朝阳区供水服务分公司',
-    address: '建设街2778号',
-    mobile: '82828282',
-  },
-  {
-    title: '朝阳区供水服务分公司',
-    address: '建设街2778号',
-    mobile: '82828282',
-  },
-  {
-    title: '朝阳区供水服务分公司',
-    address: '建设街2778号',
-    mobile: '82828282',
-  },
-  {
-    title: '朝阳区供水服务分公司',
-    address: '建设街2778号',
-    mobile: '82828282',
-  },
-  {
-    title: '朝阳区供水服务分公司',
-    address: '建设街2778号',
-    mobile: '82828282',
-  },
-])
+const list = ref()
 
 onMounted(() => {
+  // 默认显示 供水服务公司
+  list.value = allList.value.gsfwgsList
   AMapLoader.load({
     key: 'a6970a58d4d2719b7cb3a5f738f82d31',
     version: '2.0',
@@ -127,52 +118,42 @@ onMounted(() => {
         zooms: [3, 20],
         zIndex: 1000,
       })
-      const icon = {
-        type: 'image',
-        image: '/local.png',
-        size: [30, 30],
-        anchor: 'center',
-      }
-      const labelMarker0 = new AMap.LabelMarker({
-        name: '标注',
-        position: [125.295471, 43.876446],
-        zIndex: 14,
-        rank: 1,
-        icon: icon,
-        text: {
-          content: '朝阳区供水分公司',
-          direction: 'right',
-          offset: [-80, 25],
-          style: {
-            fontSize: 16,
-            fillColor: '#008000',
-          },
-        },
-      })
-      const labelMarker1 = new AMap.LabelMarker({
-        name: '标注',
-        position: [125.323643, 43.816996],
-        zIndex: 14,
-        rank: 1,
-        icon: icon,
-        text: {
-          content: '长春市人民政府',
-          direction: 'right',
-          offset: [-80, 25],
-          style: {
-            fontSize: 16,
-            fillColor: '#008000',
-          },
-        },
-      })
-      const labelMarker2 = new AMap.LabelMarker({
-        name: '标注',
-        position: [125.322527, 43.80083],
+      const labelList = makelabels(AMap)
+      labelsLayer.add(labelList)
+      mapInfo.add(labelsLayer)
+
+      map.value = mapInfo
+    })
+    .catch((e) => {
+      console.log(e)
+    })
+})
+
+const makelabels = (AMap: any) => {
+  const labelList = []
+  const icon = {
+    type: 'image',
+    image: 'local.png',
+    size: [30, 30],
+    anchor: 'center',
+  }
+  for (const key in allList.value) {
+    let name = ''
+    if (key === 'gsfwgsList') name = '供水服务公司'
+    else if (key === 'ecgsList') name = '二次供水'
+    else if (key === 'kffwzxList') name = '客服服务中心'
+    const list = get(allList, `value.${key}`, [])
+    for (const i of list) {
+      const content = get(i, 'title')
+      const position = get(i, 'pos')
+      const marker = new AMap.LabelMarker({
+        name,
+        position,
         zIndex: 14,
         rank: 1,
         icon: icon,
         text: {
-          content: '钜城，华亿广场',
+          content,
           direction: 'right',
           offset: [-80, 25],
           style: {
@@ -181,14 +162,174 @@ onMounted(() => {
           },
         },
       })
-      labelsLayer.add([labelMarker0, labelMarker1, labelMarker2])
-      mapInfo.add(labelsLayer)
-
-      map.value = mapInfo
-    })
-    .catch((e) => {
-      console.log(e)
-    })
+      labelList.push(marker)
+    }
+  }
+  return labelList
+}
+const allList = ref({
+  gsfwgsList: [
+    {
+      title: '朝阳区供水服务分公司',
+      address: '建设街2778号',
+      mobile: '81803153',
+      pos: [125.295471, 43.876446],
+    },
+    {
+      title: '绿园区供水服务分公司',
+      address: '翔运街867号',
+      mobile: '87691248',
+      pos: [125.295718, 43.892033],
+    },
+    {
+      title: '汽开区供水服务分公司',
+      address: '正阳街2588号',
+      mobile: '84751675',
+      pos: [125.272217, 43.879878],
+    },
+    {
+      title: '汽开供水分公司车百服务网点',
+      address: '车百路35-1栋',
+      mobile: '84751675',
+      pos: [125.26172, 43.862802],
+    },
+    {
+      title: '宽城区供水服务分公司',
+      address: '珠江路17号',
+      mobile: '82978633',
+      pos: [125.335639, 43.905031],
+    },
+    {
+      title: '宽城区九台路服务网点',
+      address: '庆丰路与九台路交汇郡望安石小区19栋',
+      mobile: '82978633',
+      pos: [125.327095, 43.937702],
+    },
+    {
+      title: '宽城区小合隆服务网点',
+      address: '合隆镇幸福路',
+      mobile: '82978633',
+      pos: [125.171455, 44.059828],
+    },
+    {
+      title: '南关区供水服务分公司',
+      address: '大经路919号',
+      mobile: '89358022',
+      pos: [125.33602, 43.889698],
+    },
+    {
+      title: '南关区供水分公司晨光街服务网点',
+      address: '晨光街355号',
+      mobile: '89358622',
+      pos: [125.241444, 43.809549],
+    },
+    {
+      title: '二道区供水服务分公司',
+      address: '吉盛小区2—1栋',
+      mobile: '84945325',
+      pos: [125.375775, 43.876825],
+    },
+    {
+      title: '经开区供水服务分公司',
+      address: '会展大街珠海路交汇',
+      mobile: '84954125',
+      pos: [125.390975, 43.845255],
+    },
+    {
+      title: '净月供水服务分公司',
+      address: '城大街与柳莺西路交叉路口往西南约200米',
+      mobile: '84510107',
+      pos: [125.396735, 43.779872],
+    },
+    {
+      title: '新区供水服务公司',
+      address: '龙湖大路与和安街交汇北湖派出所西侧',
+      mobile: '87052630',
+      pos: [125.373578, 43.977046],
+    },
+    {
+      title: '新区供水服务公司（高新分部）',
+      address: '晨光街355号',
+      mobile: '81803100',
+      pos: [125.241444, 43.809549],
+    },
+  ],
+  ecgsList: [
+    {
+      title: '朝阳管理处',
+      address: '长春市朝阳区繁荣路与富强街交汇处',
+      mobile: '89231220',
+      pos: [125.293612, 43.841409],
+    },
+    {
+      title: '南关管理处',
+      address: '长春市南关区警官公寓小区院内',
+      mobile: '88757707',
+      pos: [125.321704, 43.822973],
+    },
+    {
+      title: '宽城管理处',
+      address: '长春市宽城区北环城路972号',
+      mobile: '89382166',
+      pos: [125.353243, 43.946536],
+    },
+    {
+      title: '二道管理处',
+      address: '长春市二道区和顺街396号与阜丰路交汇处',
+      mobile: '84942340',
+      pos: [125.370017, 43.88961],
+    },
+    {
+      title: '绿园管理处',
+      address: '泰来街1351F—1号',
+      mobile: '89347969',
+      pos: [125.282185, 43.8781],
+    },
+    {
+      title: '经开管理处',
+      address: '长春市经开区博学路1790号',
+      mobile: '84514163',
+      pos: [125.415356, 43.819481],
+    },
+    {
+      title: '高新管理处',
+      address: '高新管理处长春市高新区晨光街355号',
+      mobile: '81803123',
+      pos: [125.241444, 43.809549],
+    },
+    {
+      title: '一汽管理处',
+      address: '长春市汽开区日新路2号',
+      mobile: '85977891',
+      pos: [125.240451, 43.859541],
+    },
+  ],
+  kffwzxList: [
+    {
+      title: '长春水投集团用户发展办公室',
+      address: '吉林省长春市南关区盛世大路814号',
+      mobile: '88971838',
+      pos: [125.332664, 43.807314],
+    },
+    {
+      title: '新区发展办',
+      address: '长春市宽城区龙湖大路与和安街交叉路口往西北约200米',
+      mobile: '87052630',
+      pos: [125.373578, 43.977046],
+    },
+    {
+      title: '客服中心',
+      address: '吉林省长春市南关区盛世大路814号',
+      mobile: '89812345',
+      pos: [125.332664, 43.807314],
+    },
+    {
+      title: '长春水投集团(维修网点)',
+      address: '长春市宽城区南广场珠江路17号',
+      mobile: '89812345',
+      pos: [125.335639, 43.905031],
+    },
+  ],
 })
 
 onUnmounted(() => {

src/views/winParts/conductingBusiness.vue

@@ -25,32 +25,32 @@ const list = ref([
   {
     title: '服务信息',
     url: 'conducting1.png',
-    path:'/'
+    path:'/messDetail?tag=2&type=service'
   },
   {
     title: '获得用水',
     url: 'conducting2.png',
-    path:'/'
+    path:'/messDetail?tag=1&type=water'
   },
   {
     title: '新区营商环境',
     url: 'conducting3.png',
-    path:'/'
+    path:'/messDetail?tag=5&type=water'
   },
   {
     title: '智慧水务',
     url: 'conducting4.png',
-    path:'/'
+    path:'/messDetail?tag=2&type=water'
   },
   {
     title: '客户服务',
     url: 'conducting5.png',
-    path:'/'
+    path:'/messDetail?tag=3&type=water'
   },
   {
     title: '用水常识',
     url: 'conducting6.png',
-    path:'/'
+    path:'/messDetail?tag=4&type=water'
   },
 ])
 /**打开对应的页面 */

src/views/winParts/newsIndex.vue

@@ -11,7 +11,13 @@
         <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane label="党建天地" name="first">
             <el-row class="info animate__animated animate__backInLeft">
-              <el-col :span="24" class="list" v-for="item in djtdList" :key="item">
+              <el-col
+                :span="24"
+                class="list"
+                v-for="item in djtdList"
+                :key="item"
+                @click="toDetail(item)"
+              >
                 <el-col :span="6" class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')"></el-image>
                 </el-col>
@@ -28,7 +34,13 @@
           </el-tab-pane>
           <el-tab-pane label="政策法规" name="second">
             <el-row class="info animate__animated animate__backInRight">
-              <el-col :span="24" class="list" v-for="item in zcfgList" :key="item">
+              <el-col
+                :span="24"
+                class="list"
+                v-for="item in zcfgList"
+                :key="item"
+                @click="toDetail(item)"
+              >
                 <el-col :span="6" class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')"></el-image>
                 </el-col>
@@ -42,7 +54,13 @@
           </el-tab-pane>
           <el-tab-pane label="招标采购" name="third">
             <el-row class="info animate__animated animate__backInLeft">
-              <el-col :span="24" class="list" v-for="item in zbcgList" :key="item">
+              <el-col
+                :span="24"
+                class="list"
+                v-for="item in zbcgList"
+                :key="item"
+                @click="toDetail(item)"
+              >
                 <el-col :span="6" class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')"></el-image>
                 </el-col>
@@ -56,7 +74,13 @@
           </el-tab-pane>
           <el-tab-pane label="集团要闻" name="fourth">
             <el-row class="info animate__animated animate__backInRight">
-              <el-col :span="24" class="list" v-for="item in jtxwList" :key="item">
+              <el-col
+                :span="24"
+                class="list"
+                v-for="item in jtxwList"
+                :key="item"
+                @click="toDetail(item)"
+              >
                 <el-col :span="6" class="imgs">
                   <el-image class="images" :src="getProp(item, 'url')"></el-image>
                 </el-col>
@@ -82,7 +106,7 @@ import type { TabsPaneContext } from 'element-plus'
 import { index } from '@/api/api'
 
 import dividerIndex from '../../components/windows/dividerIndex.vue'
-import { cloneDeep, get } from 'lodash-es'
+import { get } from 'lodash-es'
 
 const leftUrl = ref('news1.png')
 
@@ -147,6 +171,10 @@ const init = async () => {
 const getProp = (item: object, path: string) => {
   return get(item, path)
 }
+const toDetail = (data: any) => {
+  const content_id = get(data, 'content_id')
+  window.open(`/${import.meta.env.VITE_BASE_URL}/newsDetail?content_id=${content_id}`)
+}
 </script>
 <style scoped lang="scss">
 .news {