地图

src/views/jsc/components/echartsMap.vue

@@ -12,12 +12,42 @@
       mapData: {
         type: Array,
         default: []
+      },
+      streetList:{
+        type: Array,
+        default: []
       }
     },
     data() {
       return {
         myChart: null,
-        hookToolTip: {},
+        hookToolTip: {},
+        streetlist:[],
+        streetNameList:[{
+          name:'开发区',
+          coord:[119.59,31.77]
+        },{
+          name:'指前镇',
+          coord:[119.45,31.62]
+        },{
+          name:'尧塘镇',
+          coord:[119.62,31.69]
+        },{
+          name:'儒林镇',
+          coord:[119.58,31.61]
+        },{
+          name:'金城镇',
+          coord:[119.5,31.75]
+        },{
+          name:'薛埠镇',
+          coord:[119.32,31.77]
+        },{
+          name:'直溪镇',
+          coord:[119.44,31.84]
+        },{
+          name:'朱林镇',
+          coord:[119.42,31.72]
+        }]
         // mapData:[]
       }
     },
@@ -30,13 +60,14 @@
     },
     watch: {
       hookToolTip: {
-        handler(newVal, oldVal) {
-          let tooltipButton = document.querySelector(".mapsshow" + newVal.data.id)
-          let that = this
-          tooltipButton.addEventListener('click', function() {
-            that.showInfo(newVal.data.id)
+        handler(newVal, oldVal) {
+          let name = newVal.name==='尧塘镇'?'西城街道':newVal.name
+          this.$router.push({
+            path: "/record/map",
+            query: {
+              street: name
+            }
           })
-
         }
       },
     },
@@ -53,13 +84,35 @@
         this.myChart.resize()
       },
       drawChart() {
-        let that = this
-        this.mapData.forEach((m, index) => {
-          if (!m.coord) {
-            m.coord = ['', '']
-          }
-        })
-        // 基于准备好的dom，初始化echarts实例
+        let that = this
+        // console.log("this.mapData",this.mapData)
+        // this.mapData.forEach((m, index) => {
+        //   if (!m.coord) {
+        //     m.coord = ['', '']
+        //   }
+        // })
+        let _streetlist = []
+        this.streetNameList.map(item=>{
+          this.streetList.map(item1=>{
+            if(item.name===item1.name){
+              _streetlist.push({
+                name:item1.name,
+                value:item1.value,
+                coord:item.coord
+              })
+            }
+            if(item1.name==='西城街道' && item.name==='尧塘镇'){
+              _streetlist.push({
+                name:item1.name,
+                value:item1.value,
+                coord:item.coord
+              })
+            }
+          })
+        })
+        this.streetlist = _streetlist
+        // 基于准备好的dom，初始化echarts实例
+        console.log("streetList",this.streetList)
         this.myChart = echarts.init(document.getElementById('chart'))
         echarts.registerMap('GX', jtmap);
         // 绘制图表
@@ -72,11 +125,11 @@
             triggerOn: 'click',
             formatter: function(val) {
               that.hookToolTip = val;
-              if (!val.data) {
-                return
-              }
-              return '<div  class="mapsshow' + val.data.id + '" style="cursor:pointer"><p>' + val.data.name +
-                '</p><p style="color:red">查看详情</p><div>'
+              // if (!val.data) {
+              //   return
+              // }
+              // return '<div  class="mapsshow' + val.data.id + '" style="cursor:pointer"><p>' + val.data.name +
+              //   '</p><p style="color:red">查看详情</p><div>'
             }
           },
           geo: {
@@ -199,30 +252,30 @@
             ]
           },
           series: [{
-
             name: "一户一档",
             type: "map",
             mapType: "china",
             geoIndex: 0,
             markPoint: {
-              symbol: 'image://' + require('@/assets/logo-mini.png'), // 自定义图片路径
-              symbolSize: [50, 40], // 图片大小
-              symbolOffset: [0, -30],
+              // symbol: 'image://' + require('@/assets/logo-mini.png'), // 自定义图片路径
+              symbol: '', // 自定义图片路径
+              symbolSize: [10, 10], // 图片大小
+              symbolOffset: [0, 0],
               label: {
-                position: 'bottom',
+                position: 'center',
                 color: "#fff",
                 textAlign: "center",
-                padding: [4, 7],
-                borderWidth: 2, // 图形描边的宽度。
+                padding: [5, 10],
+                borderWidth: 1, // 图形描边的宽度。
                 borderColor: "#fff", // 边框颜色
                 backgroundColor: 'green', // 背景色
                 formatter(val) {
-                  return val.name
+                  return val.data.name+"："+val.data.value+"人"
                 }
               },
-
               // coord数组存放地址坐标
-              data: this.mapData
+              // data:this.streetList
+              data:this.streetlist
             }
           }],
         })

src/views/jsc/components/echartsMap1.vue

@@ -1,49 +1,255 @@
-<template>
-    <div style="width:100%;height:100%" ref="chartsDOM">
-
-    </div>
-</template>
-
-<script>
-  import * as echarts from 'echarts';
-  import jtmap from './jtmap.json';
-  export default{
-    data(){
-      return{
-        // jtmap:jtmap
-        myChart:null
-      }
-    },
-     mounted() {
-        // 初始化统计图对象
-        this.initEchartsMap()
-      },
-      methods:{
-        initEchartsMap(){
-          this.myChart = echarts.init(this.$refs["chartsDOM"]);
-          echarts.registerMap('GX', jtmap);
-          var option = {
-            series: [
-              {
-                name: '金坛地图',
-                type: 'map',
-                map: 'GX',// 这个是上面注册时的名字哦，registerMap（'这个名字保持一致'）
-                label: {
-                  show: true
-                }
+<template>
+  <div style="width:100%;height:100%" class='chart' id='chart'></div>
+</template>
+
+<script>
+  // import '../../../../node_modules/echarts/map/js/china.js' // 引入中国地图
+  import * as echarts from 'echarts';
+  import jtmap from './jtmap.json';
+
+  export default {
+    props: {
+      mapData: {
+        type: Array,
+        default: []
+      }
+    },
+    data() {
+      return {
+        myChart: null,
+        hookToolTip: {},
+        // mapData:[]
+      }
+    },
+    mounted() {
+      this.drawChart()
+
+    },
+    created() {
+
+    },
+    watch: {
+      hookToolTip: {
+        handler(newVal, oldVal) {
+          if(newVal.data!=null){
+            let tooltipButton = document.querySelector(".mapsshow" + newVal.data.id)
+            let that = this
+            tooltipButton.addEventListener('click', function() {
+              that.showInfo(newVal.data.id)
+            })
+          }else{
+            this.$router.push({
+              path: "/record/map",
+              query: {
+                street: newVal.name
               }
-            ]
-          }
-          this.myChart.setOption(option);
-        },
-        resetCharts(){
-          this.myChart.resize()
-        }
-      }
-
-
-  }
-</script>
-
-<style>
+            })
+          }
+
+
+        }
+      },
+    },
+    methods: {
+      showInfo(id) {
+        this.$router.push({
+          path: "/record/personinfo",
+          query: {
+            id: id
+          }
+        })
+      },
+      resetCharts() {
+        this.myChart.resize()
+      },
+      drawChart() {
+        let that = this
+        // console.log("this.mapData",this.mapData)
+        this.mapData.forEach((m, index) => {
+          if (!m.coord) {
+            m.coord = ['', '']
+          }
+        })
+        // 基于准备好的dom，初始化echarts实例
+        this.myChart = echarts.init(document.getElementById('chart'))
+        echarts.registerMap('GX', jtmap);
+        // 绘制图表
+        this.myChart.setOption({
+          // 提示框组件
+          tooltip: {
+            trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
+            position: 'right',
+            enterable: true,
+            triggerOn: 'click',
+            formatter: function(val) {
+              that.hookToolTip = val;
+              if (!val.data) {
+                return
+              }
+              return '<div  class="mapsshow' + val.data.id + '" style="cursor:pointer"><p>' + val.data.name +
+                '</p><p style="color:red">查看详情</p><div>'
+            }
+          },
+          geo: {
+            map: "GX",
+            roam: false, //不开启缩放和平移
+            zoom: 1.23, //视角缩放比例
+            label: {
+              normal: {
+                show: false,
+                fontSize: "0",
+                color: "rgba(0,0,0,0.7)",
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderColor: "rgba(0, 0, 0, 0.2)",
+              },
+              emphasis: {
+                // areaColor: "#F3B329", //鼠标选择区域颜色
+                shadowOffsetX: 0,
+                shadowOffsetY: 0,
+                shadowBlur: 20,
+                borderWidth: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+            // data:this.dataList
+
+            regions: [
+              //对不同的区块进行着色
+              {
+                name: "开发区",
+                itemStyle: {
+                  normal: {
+                    areaColor: "#75bedc",
+                  },
+                  emphasis: {
+                    areaColor: "#75bedc",
+                  },
+                },
+              },
+              {
+                name: "指前镇",
+                itemStyle: {
+                  normal: {
+                    areaColor: "#d7335a",
+                  },
+                  emphasis: {
+                    areaColor: "#d7335a",
+                  },
+                },
+              },
+              {
+                name: "朱林镇",
+                itemStyle: {
+                  normal: {
+                    areaColor: "#fc8251",
+                  },
+                  emphasis: {
+                    areaColor: "#fc8251",
+                  },
+                },
+              },
+              {
+                name: "直溪镇",
+                itemStyle: {
+                  normal: {
+                    areaColor:'#91cd77',
+                  },
+                  emphasis: {
+                    areaColor:'#91cd77',
+                  },
+                },
+              },
+              {
+                name: "薛埠镇",
+                itemStyle: {
+                  normal: {
+                    areaColor:'#ef6567',
+                  },
+                  emphasis: {
+                    areaColor:'#ef6567',
+                  },
+                },
+              },
+              {
+                name: "金城镇",
+                itemStyle: {
+                  normal: {
+                    areaColor:'#f9c956',
+                  },
+                  emphasis: {
+                    areaColor:'#f9c956',
+                  },
+                },
+              },
+              {
+                name: "儒林镇",
+                itemStyle: {
+                  normal: {
+                    areaColor:'#c968e1',
+                  },
+                  emphasis: {
+                    areaColor:'#c968e1',
+                  },
+                },
+              },
+              {
+                name: "尧塘镇",
+                itemStyle: {
+                  normal: {
+                    areaColor:'#00ffff',
+                  },
+                  emphasis: {
+                    areaColor:'#00ffff',
+                  },
+                },
+              },
+
+            ]
+          },
+          series: [{
+
+            name: "一户一档",
+            type: "map",
+            mapType: "china",
+            geoIndex: 0,
+            markPoint: {
+              symbol: 'image://' + require('@/assets/logo-mini.png'), // 自定义图片路径
+              symbolSize: [50, 40], // 图片大小
+              symbolOffset: [0, -30],
+              label: {
+                position: 'bottom',
+                color: "#fff",
+                textAlign: "center",
+                padding: [4, 7],
+                borderWidth: 2, // 图形描边的宽度。
+                borderColor: "#fff", // 边框颜色
+                backgroundColor: 'green', // 背景色
+                formatter(val) {
+                  return val.name
+                }
+              },
+
+              // coord数组存放地址坐标
+              data: this.mapData
+            }
+          }],
+        })
+
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .chart {
+    /* width: 100%;
+    height: 100%; */
+    /* margin: 100px 50px 0; */
+    /* border: 1px solid #eeeeee; */
+    /* background: url(../../public/static/bg.png) no-repeat; */
+    background-size: 100% 100%;
+  }
 </style>

src/views/jsc/index.vue

@@ -60,7 +60,7 @@
           </div>
         </div>
         <div class="jscMb" style="height:80%">
-          <echartsMap v-if="showMap" ref="echartsMap" :mapData='mapList'></echartsMap>
+          <echartsMap v-if="showMap" :street-list="peopleData" ref="echartsMap" :mapData='mapList'></echartsMap>
         </div>
       </div>
 
@@ -350,6 +350,10 @@
           }
         }
         this.mapList = _data
+        if(_nolng.length==0){
+          this.showMap = true
+          return
+        }
         var geocoder = null
         let that = this
         AMap.plugin("AMap.Geocoder", function() {

src/views/record/map.vue

@@ -64,7 +64,8 @@
         makerList: [],
         infoWindow: null,
         openData: [],
-        // markerList: [],
+        // markerList: [],
+        ispage:false,
         mapList: [],
         fullscreenLoading: false,
         streetList: [],
@@ -112,8 +113,14 @@
       this.$nextTick(function() {
         this.mapInit()
       })
+      if (this.$route.query?.street) {
+        this.select.street = this.$route.query.street
+        this.openSearch = true
+        this.getindex()
+      }else{
+        this.getindex()
+      }
 
-      this.getindex()
     },
     methods: {
       // openFullScreen() {
@@ -289,7 +296,8 @@
         })
       },
       pageChange(e) {
-        this.select.page = e
+        this.select.page = e
+        this.ispage = true
         this.getindex()
       },
       movetoperson(row, index) {
@@ -304,7 +312,10 @@
         }
 
       },
-      async getindex() {
+      async getindex() {
+        if(!this.ispage){
+          this.select.page = 1
+        }
         this.fullscreenLoading = true;
         this.mapList = []
         // this.map.remove(this.marker)
@@ -332,6 +343,7 @@
           }],
         })
         this.select.total = res.total
+        this.ispage = false
         if(res.data.length<1){
 
           Message({
@@ -369,10 +381,10 @@
                   // result中对应详细地理坐标信息
                   k.longitude = result.geocodes[0].location.lng
                   k.latitude = result.geocodes[0].location.lat
-                  save({
-                    table_name: that.select.table_name,
-                    ...k
-                  })
+                  // save({
+                  //   table_name: that.select.table_name,
+                  //   ...k
+                  // })
                 }
                 if (index == _nolng.length - 1) {
                   that.mapList.push(..._nolng)

src/views/record/personinfo.vue

@@ -51,7 +51,32 @@
         recordId:"",
         viewRecordId:"",
         allTable:[],
-        formDialoger: [],
+        formDialoger: [],
+        imgs:[{
+          type:'children',
+          sex:'男',
+          url:require('@/assets/boy.png')
+        },{
+          type:'children',
+          sex:'女',
+          url:require('@/assets/girl.png')
+        },{
+          type:'adult',
+          sex:'男',
+          url:require('@/assets/male.png')
+        },{
+          type:'adult',
+          sex:'女',
+          url:require('@/assets/female.png')
+        },{
+          type:'old',
+          sex:'男',
+          url:require('@/assets/grandfather.png')
+        },{
+          type:'old',
+          sex:'女',
+          url:require('@/assets/grandmother.png')
+        }],
         urlList: {
           fuels: '/book_cars',
           reforms: '/book_reform',
@@ -166,10 +191,26 @@
         const res = await show({
           id: id,
           table_name: 'records'
+        })
+
+        let age = this.getAge(res.idcard)
+        let sex = res.sex
+        let imgType = age<16?'children':(age>60?'old':'adult')
+        let imgUrl=''
+
+        this.imgs.map(item=>{
+          if(sex===item.sex){
+            console.log(imgType==item.type,item.url)
+            if(imgType==item.type){
+              imgUrl = item.url
+            }
+
+          }
         })
-        let names = `<div class="persons">${res.name}</div>`
+        let names = `<div class="persons"><img src='${imgUrl}'><div>${res.name}<div></div>`
         let contents =
-          `<div class='workhover' onclick="goUrls(${res.id},'records')"><p>姓名：${res.name}</p><p>性别：${res.sex}</p><p>联系方式：${res.mobile}</p><p>残疾类别：${res.disabilitytype}</p><p>残疾等级：${res?.disabilitylevel}</p><p>现居住地：${res.reside}</p></div>`
+          `<div class='workhover' onclick="goUrls(${res.id},'records')"><p>姓名：${res.name}</p><p>性别：${res.sex}</p><p>年龄：${age}</p><p>联系方式：${res.mobile}</p><p>残疾类别：${res.disabilitytype}</p><p>残疾等级：${res?.disabilitylevel}</p><p>现居住地：${res.reside}</p></div>`
+
         let views = ''
         let workflows = ''
         this.idcard = res.idcard
@@ -265,6 +306,27 @@
           const val2 = b[property];
           return val1 - val2;
         }
+      },
+      getAge(iden) {
+        let val = iden.length;
+        let myDate = new Date();
+        let month = myDate.getMonth() + 1;
+        let day = myDate.getDate();
+        let age = 0;
+
+        if (val === 18) {
+          age = myDate.getFullYear() - iden.substring(6, 10) - 1;
+
+          if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;
+
+        }
+        if (val === 15) {
+          age = myDate.getFullYear() - iden.substring(6, 8) - 1901;
+
+          if (iden.substring(8, 10) < month || iden.substring(8, 10) == month && iden.substring(10, 12) <= day) age++;
+        }
+
+        return age
       },
 
 
@@ -397,7 +459,13 @@
     width: 150px;
     background: #ddd;
     border-radius: 100%;
-    line-height: 150px;
-    margin: 35px auto;
+    /* line-height: 150px; */
+    margin: 35px auto;
+    text-align: center;
+    padding-top: 10px;
+  }
+  /deep/ .avue-flow__node-body .persons img{
+    display:inline-block;
+    width:50%
   }
 </style>