|
@@ -1,259 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="main">
|
|
|
- <div class="search">
|
|
|
- <div class="left_blank"/>
|
|
|
-
|
|
|
- <transition name="el-zoom-in-center">
|
|
|
- <div class="search_main" v-show="showSearch">
|
|
|
-
|
|
|
- <el-select style="width: 60px;margin-left: 5px" v-model="patientType">
|
|
|
- <el-option :value="1" label="住院"/>
|
|
|
- <el-option :value="2" label="门诊"/>
|
|
|
- </el-select>
|
|
|
- <el-date-picker
|
|
|
- :disabled="!(patientType === 1 && inHospital=== 2)"
|
|
|
- v-model="dateRange"
|
|
|
- :shortcuts="shortcuts"
|
|
|
- end-placeholder="结束日期"
|
|
|
- placeholder="选择日期"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始日期"
|
|
|
- style="width: 220px;top:3px"
|
|
|
- type="daterange"/>
|
|
|
-
|
|
|
- <el-select style="width: 60px" v-model="inHospital" :disabled="patientType === 2">
|
|
|
- <el-option :value="1" label="在院"/>
|
|
|
- <el-option :value="2" label="出院"/>
|
|
|
- </el-select>
|
|
|
-
|
|
|
- <el-button icon="Search" type="primary" @click="queryData"/>
|
|
|
-
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
-
|
|
|
- <div class="search_icon 小手指" @click="showSearch = !showSearch">
|
|
|
- <el-icon>
|
|
|
- <ArrowLeftBold v-show="showSearch"/>
|
|
|
- <ArrowRightBold v-show="!showSearch"/>
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div id="allmap" style="height: 100%;width: 100%"></div>
|
|
|
- <transition name="el-fade-in-linear">
|
|
|
- <div class="patient_info" v-show="showInfoWindow">
|
|
|
- <el-icon class="close 小手指" @click="closePatientInfoWindow">
|
|
|
- <CircleClose/>
|
|
|
- </el-icon>
|
|
|
- <div class="title" @click="locateThePatient">
|
|
|
- 患者信息
|
|
|
- </div>
|
|
|
- <div class="body">
|
|
|
- <span>
|
|
|
- 患者姓名:{{ patientInfo.name }}
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- 门诊/住院号: {{ patientInfo.patNo }}
|
|
|
- </span>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import {patientAddress} from "@/api/reports/patient-distribution-address";
|
|
|
-import {shortcuts} from '@/data/shortcuts'
|
|
|
-import {getDateRangeFormatDate} from "@/utils/date";
|
|
|
-import thyy from '@/assets/csthyylogoplain.png'
|
|
|
-
|
|
|
-let thyyLocation = new BMap.Point(112.96716239793697, 28.309655062968343)
|
|
|
-
|
|
|
-let patientInfo = $ref('')
|
|
|
-let showInfoWindow = $ref(false)
|
|
|
-
|
|
|
-let showSearch = $ref(false)
|
|
|
-let dateRange = $ref([])
|
|
|
-let inHospital = $ref(1)
|
|
|
-let patientType = $ref(1)
|
|
|
-
|
|
|
-const createADrawing = (data) => {
|
|
|
- map.clearOverlays()
|
|
|
- createAHospitalLogo()
|
|
|
-
|
|
|
- let points = []
|
|
|
-
|
|
|
- for (let i = 0, len = data.length; i < len; i++) {
|
|
|
- let item = data[i];
|
|
|
- points.push({
|
|
|
- geometry: {
|
|
|
- type: 'Point',
|
|
|
- patientData: item,
|
|
|
- coordinates: [item.longitude, item.latitude]
|
|
|
- },
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
- const dataSet = new mapv.DataSet(points);
|
|
|
-
|
|
|
- const options = {
|
|
|
- shadowColor: 'rgba(255, 250, 50, 1)',
|
|
|
- shadowBlur: 10,
|
|
|
- // 非聚合点的颜色和大小,未设置icon或icon获取失败时使用
|
|
|
- fillStyle: 'rgba(255, 50, 0, 1.0)',
|
|
|
- size: 50 / 3 / 2, // 非聚合点的半径
|
|
|
- minSize: 8, // 聚合点最小半径
|
|
|
- maxSize: 31, // 聚合点最大半径
|
|
|
- globalAlpha: 0.8, // 透明度
|
|
|
- clusterRadius: 150, // 聚合像素半径
|
|
|
- maxClusterZoom: 18, // 最大聚合的级别
|
|
|
- maxZoom: 19, // 最大显示级别
|
|
|
- minPoints: 5, // 最少聚合点数,点数多于此值才会被聚合
|
|
|
- extent: 400, // 聚合的细腻程度,越高聚合后点越密集
|
|
|
- label: { // 聚合文本样式
|
|
|
- show: true, // 是否显示
|
|
|
- fillStyle: 'white',
|
|
|
- },
|
|
|
- gradient: {0: "blue", 0.5: "#28f51a", 1.0: "rgb(255,0,0)"}, // 聚合图标渐变色
|
|
|
- draw: 'cluster',
|
|
|
- methods: {
|
|
|
- click(point) {
|
|
|
- if (point?.geometry?.patientData) {
|
|
|
- deletePreviousPunctuation()
|
|
|
- map.removeOverlay(new BMap.Point(patientInfo.longitude, patientInfo.latitude))
|
|
|
- showInfoWindow = true
|
|
|
- patientInfo = point?.geometry?.patientData
|
|
|
- patientInfo.mapPoint = new BMap.Point(patientInfo.longitude, patientInfo.latitude)
|
|
|
- locateThePatient()
|
|
|
- marker()
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- new mapv.baiduMapLayer(map, dataSet, options);
|
|
|
-}
|
|
|
-
|
|
|
-const locateThePatient = () => {
|
|
|
- map.panTo(patientInfo.mapPoint)
|
|
|
-}
|
|
|
-
|
|
|
-const marker = () => {
|
|
|
- const marker = new BMap.Marker(patientInfo.mapPoint);
|
|
|
- marker.id = patientInfo.patNo
|
|
|
- map.addOverlay(marker)
|
|
|
-}
|
|
|
-
|
|
|
-const closePatientInfoWindow = () => {
|
|
|
- showInfoWindow = false
|
|
|
- deletePreviousPunctuation()
|
|
|
-}
|
|
|
-
|
|
|
-const deletePreviousPunctuation = () => {
|
|
|
- let data = map.getOverlays()
|
|
|
- for (let i = 0; i < data.length; i++) {
|
|
|
- let item = data[i]
|
|
|
- if (data[i].id) {
|
|
|
- if (data[i].id === patientInfo.patNo) {
|
|
|
- map.removeOverlay(item)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const queryData = () => {
|
|
|
- let dateS = getDateRangeFormatDate(dateRange)
|
|
|
- map.panTo(thyyLocation)
|
|
|
- patientAddress(patientType, inHospital, dateS.startTime, dateS.endTime).then((res) => {
|
|
|
- createADrawing(res)
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-const createAHospitalLogo = () => {
|
|
|
- const myIcon = new BMap.Icon(thyy, new BMap.Size(40, 40));
|
|
|
- myIcon.setImageSize(new BMap.Size(40, 40))
|
|
|
- const marker = new BMap.Marker(thyyLocation, {
|
|
|
- icon: myIcon
|
|
|
- });
|
|
|
- map.addOverlay(marker);
|
|
|
-}
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- window.map = new BMap.Map("allmap", {
|
|
|
- enableMapClick: false
|
|
|
- }); // 创建Map实例
|
|
|
- map.centerAndZoom(thyyLocation, 15); // 初始化地图,设置中心点坐标和地图级别
|
|
|
- map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
|
|
-
|
|
|
- queryData()
|
|
|
-
|
|
|
-})
|
|
|
-
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
-.main {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .search {
|
|
|
- margin: 5px;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- display: flex;
|
|
|
- z-index: 10;
|
|
|
- background-color: white;
|
|
|
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
|
- line-height: 40px;
|
|
|
-
|
|
|
- .search_main {
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .search_icon {
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .patient_info {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- margin: 5px;
|
|
|
- padding: 5px;
|
|
|
- border-radius: 5px;
|
|
|
- font-size: 16px;
|
|
|
- width: 220px;
|
|
|
- text-align: center;
|
|
|
- background-color: white;
|
|
|
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
|
-
|
|
|
- .close {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
- background-color: #0a84fd;
|
|
|
- border-radius: 5px;
|
|
|
- color: white;
|
|
|
- margin: 5px;
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .body {
|
|
|
- color: #000000;
|
|
|
- font-size: 12px;
|
|
|
- text-align: left;
|
|
|
- margin: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-</style>
|