|
@@ -0,0 +1,351 @@
|
|
|
+<template>
|
|
|
+ <div id="maps">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24" class="main">
|
|
|
+ <el-col :span="24" class="one">
|
|
|
+ <el-form :model="searchForm" ref="searchForm">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input size="mini" placeholder="姓名" v-model="searchForm.name">
|
|
|
+ <i slot="suffix" class="el-input__icon el-icon-user-solid"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item>
|
|
|
+ <el-input size="mini" placeholder="身份证号" v-model="searchForm.card">
|
|
|
+ <i slot="suffix" class="el-input__icon el-icon-orange"></i>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="btn">
|
|
|
+ <el-button type="primary" size="mini" @click="toSearch()">查询</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="two">
|
|
|
+ <div id="container" :style="{ height: `${windowInfo && windowInfo.hei == 1080 ? '385px' : '290px'}` }"></div>
|
|
|
+ </el-col>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog :visible.sync="dialog" title="患者信息" :destroy-on-close="true">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form>
|
|
|
+ <el-form-item v-for="(i, index) in infoFields1" :key="`if${index}`" :label="i.label">{{ getProp(i.data, i.prop) }}</el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form>
|
|
|
+ <el-form-item v-for="(i, index) in infoFields2" :key="`if${index}`" :label="i.label">{{ getProp(i.data, i.prop) }}</el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * 1.初始化地图
|
|
|
+ * 2.初始化围栏
|
|
|
+ * 3.查询患者及监护人坐标
|
|
|
+ * 4.初始化警告,修改患者是否未被处理状态
|
|
|
+ */
|
|
|
+const _ = require('lodash');
|
|
|
+import MapLoader from '@/plugins/amap';
|
|
|
+import drawTools from '@/util/draw';
|
|
|
+import mapFunction from '@/util/map';
|
|
|
+import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
+const { mapActions: ward } = createNamespacedHelpers('ward');
|
|
|
+const { mapActions: position } = createNamespacedHelpers('position');
|
|
|
+const { mapActions: range } = createNamespacedHelpers('range');
|
|
|
+const { mapActions: sendcase } = createNamespacedHelpers('sendcase');
|
|
|
+export default {
|
|
|
+ name: 'maps',
|
|
|
+ props: {
|
|
|
+ windowInfo: { type: Object },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ data: function () {
|
|
|
+ return {
|
|
|
+ zoom: '3.5',
|
|
|
+ map: undefined,
|
|
|
+ geocoder: undefined, // 地理查询
|
|
|
+ center: [105.34, 36.312316],
|
|
|
+ ccCenter: [125.324667, 43.911535], //初始定位到中心
|
|
|
+ mapStyle: 'amap://styles/387f96e0666b7d5aec6e11cffa97c91a',
|
|
|
+ allPoints: [], // 所有监控的点
|
|
|
+ warningList: [],
|
|
|
+ fence: [], //围栏信息
|
|
|
+ fenceGraphic: [], // 地图围栏数据
|
|
|
+ info: {}, // 病人信息
|
|
|
+ infoFields1: [
|
|
|
+ { label: '姓名', data: 'info', prop: 'ward.name' },
|
|
|
+ { label: '性别', data: 'info', prop: 'ward.gender' },
|
|
|
+ { label: '身份证号', data: 'info', prop: 'ward.card' },
|
|
|
+ { label: '病例', data: 'info', prop: 'ward.case' },
|
|
|
+ { label: '重点人联系方式', data: 'info', prop: 'ward.important_phone' },
|
|
|
+ { label: '重点人微信号', data: 'info', prop: 'ward.important_wx' },
|
|
|
+ { label: '重点人工作单位', data: 'info', prop: 'ward.important_compan' },
|
|
|
+ { label: '户籍地址', data: 'info', prop: 'ward.hj_address' },
|
|
|
+ { label: '实际住址', data: 'info', prop: 'ward.address' },
|
|
|
+ { label: '预警等级', data: 'info', prop: 'ward.level' },
|
|
|
+ { label: '登记年份', data: 'info', prop: 'ward.year' },
|
|
|
+ ],
|
|
|
+ infoFields2: [
|
|
|
+ { label: '监护人姓名', data: 'info', prop: 'guardian.name' },
|
|
|
+ { label: '监护人身份证号', data: 'info', prop: 'guardian.card' },
|
|
|
+ { label: '监护人联系方式', data: 'info', prop: 'guardian.phone' },
|
|
|
+ { label: '监护人单位', data: 'info', prop: 'guardian.unit' },
|
|
|
+ { label: '监护人地址', data: 'info', prop: 'guardian.address' },
|
|
|
+ { label: '管辖民警', data: 'info', prop: 'ward.police' },
|
|
|
+ { label: '管辖民警联系电话', data: 'info', prop: 'ward.police_phone' },
|
|
|
+ ],
|
|
|
+ dialog: false,
|
|
|
+ // 地图类
|
|
|
+ massMark: undefined,
|
|
|
+ timer: undefined,
|
|
|
+
|
|
|
+ wardFence: undefined,
|
|
|
+
|
|
|
+ // 新增查询方式
|
|
|
+ searchForm: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...position(['mapPos', 'mapWard']),
|
|
|
+ ...range({ getFences: 'query' }),
|
|
|
+ ...sendcase({ getWarning: 'query' }),
|
|
|
+ ...ward({ findWard: 'query' }),
|
|
|
+ async init() {
|
|
|
+ await MapLoader();
|
|
|
+ let that = this;
|
|
|
+ let map = new AMap.Map('container', {
|
|
|
+ zoom: this.zoom,
|
|
|
+ resizeEnable: true,
|
|
|
+ viewMode: '2D',
|
|
|
+ center: this.center,
|
|
|
+ mapStyle: this.mapStyle,
|
|
|
+ });
|
|
|
+ if (process.env.NODE_ENV !== 'development') {
|
|
|
+ // 隐藏中国以外的地方
|
|
|
+ AMap.plugin('AMap.DistrictSearch', function () {
|
|
|
+ new AMap.DistrictSearch({
|
|
|
+ extensions: 'all',
|
|
|
+ level: 'province',
|
|
|
+ subdistrict: 0,
|
|
|
+ }).search('中国', function (status, result) {
|
|
|
+ // 外多边形坐标数组和内多边形坐标数组
|
|
|
+ let outer = [new AMap.LngLat(-360, 90, true), new AMap.LngLat(-360, -90, true), new AMap.LngLat(360, -90, true), new AMap.LngLat(360, 90, true)];
|
|
|
+ let holes = result.districtList[0].boundaries;
|
|
|
+ let pathArray = [outer];
|
|
|
+ pathArray.push.apply(pathArray, holes);
|
|
|
+ let polygon = new AMap.Polygon({
|
|
|
+ pathL: pathArray,
|
|
|
+ strokeColor: 'red', //城市边界颜色
|
|
|
+ strokeWeight: 3,
|
|
|
+ fillColor: '#171d4f', // 遮罩背景色黑色
|
|
|
+ fillOpacity: 1,
|
|
|
+ });
|
|
|
+ polygon.setPath(pathArray);
|
|
|
+ map.add(polygon);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ AMap.plugin('AMap.Geocoder', function () {
|
|
|
+ that.geocoder = new AMap.Geocoder({ city: '全国' });
|
|
|
+ });
|
|
|
+
|
|
|
+ map.on('complete', () => {
|
|
|
+ this.map = map;
|
|
|
+ mapFunction.initEvent(this.map, this.geocoder);
|
|
|
+ this.searchFence();
|
|
|
+ this.initWarning();
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ async search() {
|
|
|
+ const res = await this.mapPos();
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ let data = res.data;
|
|
|
+ data = data.map((i) => {
|
|
|
+ i.position = [i.longitude, i.latitude];
|
|
|
+ return i;
|
|
|
+ });
|
|
|
+ for (const i of data) {
|
|
|
+ const { fence } = i;
|
|
|
+ if (fence) {
|
|
|
+ let obj;
|
|
|
+ const { type } = fence;
|
|
|
+ if (type === 'polygon') obj = drawTools.initPolygon({ ...fence, drawType: 'ward' });
|
|
|
+ else obj = drawTools.initRectangle({ ...fence, drawType: 'ward' });
|
|
|
+ this.map.add(obj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$set(this, `allPoints`, data);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 初始化海量点
|
|
|
+ initMassMark(pointsList = this.allPoints) {
|
|
|
+ const points = [];
|
|
|
+ for (const i of pointsList) {
|
|
|
+ // TODO 处理数据,查看这个人是否报警了
|
|
|
+ const { type, user_id, case_number } = i;
|
|
|
+ if (type === 'ward') {
|
|
|
+ const r = this.warningList.find((f) => f.w_id === user_id);
|
|
|
+ if (r) i.level = 'warning';
|
|
|
+ // 没报警的话,查看是否超过分级,需要修改图标
|
|
|
+ else if (case_number) {
|
|
|
+ if (case_number < 3) i.level = '<3';
|
|
|
+ else if (3 <= case_number && case_number < 5) i.level = '3-5';
|
|
|
+ else if (case_number >= 5) i.level = '>5';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const point = drawTools.initMassMarkData(i);
|
|
|
+ if (point) points.push(point);
|
|
|
+ }
|
|
|
+ //为海量点显示label提示的点
|
|
|
+ let marker;
|
|
|
+ if (!this.massMark) {
|
|
|
+ this.massMark = drawTools.initMassMark(points);
|
|
|
+ this.massMark.on('mouseover', (e) => {
|
|
|
+ marker = new AMap.Marker({ content: ' ', map: this.map });
|
|
|
+ const d = _.get(e, 'data');
|
|
|
+ marker.setPosition(d.lnglat);
|
|
|
+ marker.setLabel({ content: d.name, offset: [-20, -10] });
|
|
|
+ });
|
|
|
+ this.massMark.on('mouseout', (e) => {
|
|
|
+ this.map.remove(marker);
|
|
|
+ });
|
|
|
+ this.massMark.on('click', (e) => {
|
|
|
+ // 查看这是患者还是监护人,监护人没有事件
|
|
|
+ const d = _.get(e, 'data');
|
|
|
+ if (d.type !== 'ward') return;
|
|
|
+ this.getWardInfo(d.user_id);
|
|
|
+ });
|
|
|
+ this.massMark.setMap(this.map);
|
|
|
+ } else this.massMark.setData(points);
|
|
|
+ },
|
|
|
+ // 获取病人信息
|
|
|
+ async getWardInfo(id) {
|
|
|
+ const res = await this.mapWard(id);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `info`, res.data);
|
|
|
+ this.dialog = true;
|
|
|
+ // const fence = _.get(res.data, 'ward.fence');
|
|
|
+ // if (fence) {
|
|
|
+ // if (this.wardFence) this.map.remove(this.wardFence);
|
|
|
+ // let obj;
|
|
|
+ // const { type } = fence;
|
|
|
+ // if (type === 'polygon') obj = drawTools.initPolygon({ ...fence, drawType: 'ward' });
|
|
|
+ // else obj = drawTools.initRectangle({ ...fence, drawType: 'ward' });
|
|
|
+ // this.map.add(obj);
|
|
|
+ // this.wardFence = obj;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取围栏
|
|
|
+ async searchFence() {
|
|
|
+ const res = await this.getFences({ status: '0' });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ const arr = [];
|
|
|
+ for (const i of res.data) {
|
|
|
+ const { range, ...info } = i;
|
|
|
+ const obj = { ...info, ...range };
|
|
|
+ arr.push(obj);
|
|
|
+ }
|
|
|
+ this.$set(this, 'fence', arr);
|
|
|
+ this.drawFence();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 画围栏
|
|
|
+ drawFence() {
|
|
|
+ const arr = [];
|
|
|
+ for (const f of this.fence) {
|
|
|
+ const { type } = f;
|
|
|
+ let obj;
|
|
|
+ if (type === 'polygon') obj = drawTools.initPolygon({ ...f, drawType: 'fence' });
|
|
|
+ else obj = drawTools.initRectangle({ ...f, drawType: 'fence' });
|
|
|
+ this.map.add(obj);
|
|
|
+ arr.push(obj);
|
|
|
+ }
|
|
|
+ this.$set(this, `fenceGraphic`, arr);
|
|
|
+ },
|
|
|
+ // 获取属性(深层)
|
|
|
+ getProp(data, prop) {
|
|
|
+ return _.get(this[data], prop, '暂无');
|
|
|
+ },
|
|
|
+ // 初始化警情未处理事件
|
|
|
+ async initWarning() {
|
|
|
+ await this.search();
|
|
|
+ await this.searchWarning('init');
|
|
|
+ setInterval(async () => {
|
|
|
+ await this.search();
|
|
|
+ await this.searchWarning();
|
|
|
+ }, 5000);
|
|
|
+ },
|
|
|
+ async searchWarning() {
|
|
|
+ const res = await this.getWarning({ status: '0' });
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ this.$set(this, `warningList`, res.data);
|
|
|
+ // 查询渲染海量点
|
|
|
+ this.initMassMark();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 提交查询
|
|
|
+ async toSearch() {
|
|
|
+ const obj = _.cloneDeep(this.searchForm);
|
|
|
+ const res = await this.findWard(obj);
|
|
|
+ if (this.$checkRes(res)) {
|
|
|
+ const data = _.head(res.data);
|
|
|
+ if (_.get(data, '_id')) {
|
|
|
+ window.open(`/sps/watch/ward/${_.get(data, '_id')}`);
|
|
|
+ } else {
|
|
|
+ this.$message.warning('没有查询到相关人员的定位信息');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (this.timer) clearInterval(this.timer);
|
|
|
+ if (this.map) this.map.destroy();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+#container {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ color: #000;
|
|
|
+}
|
|
|
+/deep/.el-dialog__body {
|
|
|
+ height: 50vh;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+.main {
|
|
|
+ .one {
|
|
|
+ /deep/.el-form-item {
|
|
|
+ float: left;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ text-align: right;
|
|
|
+ .el-button {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|