update
1.修改socket弹窗等
This commit is contained in:
@@ -19,22 +19,22 @@
|
||||
<a-button class="search-btn" @click="searchRoute" :loading="searchFlag" :disabled="searchFlag"> 路线规划 </a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
|
||||
<div v-show="routeList.length" class="has-data">
|
||||
<div class="line-title"> {{ panelTitle }}</div>
|
||||
<div class="line-content">
|
||||
<div class="start">起点</div>
|
||||
<div class="line-body">
|
||||
<div class="line"></div>
|
||||
<div class="line-desc">
|
||||
<p v-for="(item, i) in routeList" :key="i">{{ item }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="showRoutePanel" v-click-outside="outClick" class="line-container">
|
||||
<div v-show="routeList.length" class="has-data">
|
||||
<div class="line-title"> {{ panelTitle }}</div>
|
||||
<div class="line-content">
|
||||
<div class="start">起点</div>
|
||||
<div class="line-body">
|
||||
<div class="line"></div>
|
||||
<div class="line-desc">
|
||||
<p v-for="(item, i) in routeList" :key="i">{{ item }}</p>
|
||||
</div>
|
||||
<div class="end">终点</div>
|
||||
</div>
|
||||
<div class="end">终点</div>
|
||||
</div>
|
||||
<div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
|
||||
</div>
|
||||
<div v-show="!routeList.length" class="empty-data"> 暂无数据</div>
|
||||
</div>
|
||||
<div class="map">
|
||||
<div style="flex: 1; overflow: hidden">
|
||||
@@ -59,10 +59,18 @@
|
||||
<div class="text">累计处置</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hospital-list" :class="[themeType]" v-if="showHospitalList">
|
||||
<div class="hospital-item" v-for="(item, index) in hospitalList" :key="index" @click="showDrivingLine(item)">
|
||||
<div>{{ item.name }}</div>
|
||||
<div>相距{{ item.distance }}</div>
|
||||
<div>驾车大约{{ item.driveTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { nextTick, onMounted, ref } from 'vue';
|
||||
import { infoContent, legendList, tabList } from '/@/views/indexSun/indexSun.ts';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { innerLineLight, outerLineOption } from '/@/assets/mapUtils/mapConstant.ts';
|
||||
@@ -71,7 +79,8 @@
|
||||
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
||||
import $bus from '/@/utils/bus.ts';
|
||||
import { earlyWarning } from '/@/utils/busConstant.ts';
|
||||
|
||||
import { useTheme } from '/@/hooks/theme/useTheme.ts';
|
||||
const { themeType } = useTheme();
|
||||
const list = ref(tabList);
|
||||
const currentIndex = ref(0);
|
||||
let searchFlag = ref(false);
|
||||
@@ -87,11 +96,25 @@
|
||||
return true;
|
||||
},
|
||||
},
|
||||
//是否展示最近的三个医院
|
||||
showHospitalList: {
|
||||
type: Boolean,
|
||||
default: () => {
|
||||
return false;
|
||||
},
|
||||
},
|
||||
hospitalList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
});
|
||||
const useDetail = useDetailStore();
|
||||
const showRoutePanel = ref(false);
|
||||
const panelTitle = ref();
|
||||
const level = ref(0);
|
||||
const drivingTitle = ref('');
|
||||
const routeList = ref([]);
|
||||
const emits = defineEmits(['clearHospitalList']);
|
||||
const showDrivingPanel = ref(false);
|
||||
@@ -121,6 +144,19 @@
|
||||
});
|
||||
});
|
||||
|
||||
function showDrivingLine(item) {
|
||||
nextTick(() => {
|
||||
panelTitle.value = '全程' + item.driveTime + item.distance;
|
||||
routeList.value = item.routeList?.map((item) => item?.instruction);
|
||||
showDrivingPanel.value = true;
|
||||
if (item.lon) {
|
||||
Map.clearNaviLine();
|
||||
Map.createNaviLine(item.userLocation, [item.lon, item.lat]);
|
||||
}
|
||||
showRoutePanel.value = true;
|
||||
});
|
||||
}
|
||||
|
||||
function setLevel() {
|
||||
//获取当前地图级别
|
||||
level.value = Map.map.getZoom();
|
||||
@@ -377,88 +413,6 @@
|
||||
background: #6d8bf1;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.line-container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 54px;
|
||||
width: 288px;
|
||||
padding: 9px 18px;
|
||||
min-height: 200px;
|
||||
max-height: 473px;
|
||||
overflow: auto;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 2px;
|
||||
//border: 1px solid #1b7ef2;
|
||||
|
||||
.line-title {
|
||||
margin-bottom: 9px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--cardFontColor);
|
||||
}
|
||||
|
||||
.line-content {
|
||||
font-size: 12px;
|
||||
color: var(--cardFontColor);
|
||||
|
||||
.start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '起';
|
||||
color: var(--cardFontFFF);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: var(--circelBg);
|
||||
}
|
||||
}
|
||||
|
||||
.end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '终';
|
||||
color: var(--cardFontFFF);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: var(--circelBg);
|
||||
}
|
||||
}
|
||||
|
||||
.line-body {
|
||||
display: flex;
|
||||
color: var(--cardFontColor);
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
background-color: var(--circelBg);
|
||||
margin: 5px 19px 5px 8px;
|
||||
}
|
||||
|
||||
.line-desc {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
margin-top: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map {
|
||||
@@ -578,5 +532,113 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hospital-list {
|
||||
position: absolute;
|
||||
bottom: 160px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
|
||||
.hospital-item {
|
||||
background: #0a1d36;
|
||||
border: 1px solid #0a1d36;
|
||||
box-shadow: 0 0 3px 3px #0a1d36;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
min-width: 200px;
|
||||
max-width: 200px;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: 0 10px;
|
||||
font-size: 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.line-container {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 54px;
|
||||
width: 288px;
|
||||
padding: 9px 18px;
|
||||
min-height: 200px;
|
||||
max-height: 473px;
|
||||
overflow: auto;
|
||||
background: #0a1d36;
|
||||
border-radius: 2px;
|
||||
//border: 1px solid #1b7ef2;
|
||||
|
||||
.line-title {
|
||||
margin-bottom: 9px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
background: #0a1d36 !important;
|
||||
color: var(--cardFontColor);
|
||||
}
|
||||
|
||||
.line-content {
|
||||
font-size: 12px;
|
||||
color: var(--cardFontColor);
|
||||
|
||||
.start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '起';
|
||||
color: var(--cardFontFFF);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: var(--circelBg);
|
||||
}
|
||||
}
|
||||
|
||||
.end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '终';
|
||||
color: var(--cardFontFFF);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: var(--circelBg);
|
||||
}
|
||||
}
|
||||
|
||||
.line-body {
|
||||
display: flex;
|
||||
color: var(--cardFontColor);
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 1px;
|
||||
background-color: var(--circelBg);
|
||||
margin: 5px 19px 5px 8px;
|
||||
}
|
||||
|
||||
.line-desc {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-data {
|
||||
margin-top: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -14,10 +14,10 @@
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="单位">
|
||||
<a-select placeholder="选择单位" v-model:value="orgCode" :options="option" :field-names="fieldNames" />
|
||||
<a-select placeholder="选择单位" @change="changeSecond" v-model:value="orgCode1" :options="option1" />
|
||||
</a-form-item>
|
||||
<a-form-item label="部门">
|
||||
<a-select placeholder="选择单位" @focus="changeDept" v-model:value="orgCode" :options="option" :field-names="fieldNames" />
|
||||
<a-select placeholder="选择部门" v-model:value="orgCode2" :options="option2" />
|
||||
</a-form-item>
|
||||
<slot name="searchSecond"></slot>
|
||||
</Form>
|
||||
@@ -56,12 +56,11 @@
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { useDialog } from '/@/views/components/dialogHooks.ts';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { SexType, sexTypeList } from '/@/utils/settings.ts';
|
||||
import { SexType } from '/@/utils/settings.ts';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { useDepart } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
import { message } from 'ant-design-vue';
|
||||
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
|
||||
import { getSecondaryDepartmentList } from '/@/views/indexSun/indexSun.api.ts';
|
||||
import { allSecondaryDepartsApi, getThreeDepartByOrgCodeApi } from '/@/views/indexSun/indexSun.api.ts';
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
@@ -95,28 +94,71 @@
|
||||
const formState = ref();
|
||||
const registerTable = ref();
|
||||
const dialogTitle = ref('');
|
||||
const option1 = ref([{ label: '全部', value: '' }]);
|
||||
const option2 = ref([{ label: '全部', value: '' }]);
|
||||
const orgCode1 = ref('');
|
||||
const orgCode2 = ref('');
|
||||
const formRecord = ref({});
|
||||
const dataActity = ref(1);
|
||||
function changeDept() {
|
||||
if (!orgCode.value) {
|
||||
return message.warning('请先选择单位');
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
getSecondDept();
|
||||
getSecondDepart();
|
||||
});
|
||||
|
||||
function getSecondDepart() {
|
||||
allSecondaryDepartsApi({})
|
||||
.then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
const op: any[] = res?.result
|
||||
? res.result.map((it: any) => {
|
||||
return {
|
||||
label: it.departName,
|
||||
value: it.orgCode,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
option1.value = option1.value.concat(op);
|
||||
} else {
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
function handleDataChange(type) {
|
||||
if (type == dataActity.value) return;
|
||||
dataActity.value = type;
|
||||
}
|
||||
function getSecondDept() {
|
||||
getSecondaryDepartmentList().then((res) => {
|
||||
console.log(res, 'shshakjhdsjbjanmdjka');
|
||||
if (res.code == 200) {
|
||||
console.log(res, 'ddddddddd');
|
||||
}
|
||||
});
|
||||
|
||||
function changeSecond() {
|
||||
orgCode2.value = '';
|
||||
option2.value = [{ label: '全部', value: '' }];
|
||||
if (orgCode1.value) {
|
||||
getThirdD();
|
||||
}
|
||||
}
|
||||
|
||||
function getThirdD() {
|
||||
getThreeDepartByOrgCodeApi({ orgCode: orgCode1.value })
|
||||
.then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
const op: any[] = res?.result
|
||||
? res.result.map((it: any) => {
|
||||
return {
|
||||
label: it.departName,
|
||||
value: it.orgCode,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
option2.value = option2.value.concat(op);
|
||||
} else {
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
style: { width: '80px' },
|
||||
@@ -137,7 +179,6 @@
|
||||
twoROnlyFun();
|
||||
}
|
||||
getField();
|
||||
getSecondDept();
|
||||
});
|
||||
const normalNum = ref();
|
||||
const abnormalNum = ref();
|
||||
@@ -189,7 +230,6 @@
|
||||
...formRecord.value,
|
||||
...result,
|
||||
};
|
||||
getSecondDept();
|
||||
console.log(formRecord.value);
|
||||
}
|
||||
function handleClicksearch() {
|
||||
@@ -200,7 +240,6 @@
|
||||
// registerTable.value.getRecords();
|
||||
}
|
||||
|
||||
const { orgCode, option, fieldNames, setOrgCode } = useDepart();
|
||||
const { visible, closeDialog, openDialog } = useDialog({ title: dialogTitle.value });
|
||||
|
||||
function handleClose() {
|
||||
|
||||
@@ -7,6 +7,8 @@ enum Api {
|
||||
oneR = '/health-watch/watch/watchMonitorData/getMonitorList',
|
||||
threeR = '/health-emergency/emergency/LargeScreenNew/medicalAbnormalStatistics',
|
||||
twoR = '/health-emergency/emergency/LargeScreenNew/healthSign',
|
||||
allSecondaryDeparts = '/sys/sysDepart/allSecondaryDeparts',
|
||||
getThreeDepartByOrgCode = '/sys/sysDepart/getThreeDepartByOrgCode',
|
||||
threeRModal = '/health-emergency/emergency/LargeScreenNew/medicalAbnormal',
|
||||
twoRModal1 = '/health-emergency/emergency/LargeScreenNew/healthWeightLoss',
|
||||
twoRModal2 = '/health-emergency/emergency/LargeScreenNew/healthBloodSugar',
|
||||
@@ -26,3 +28,5 @@ export const twoRModal1Api = (params) => post(Api.twoRModal1, params);
|
||||
export const twoRModal2Api = (params) => post(Api.twoRModal2, params);
|
||||
export const twoRModal3Api = (params) => post(Api.twoRModal3, params);
|
||||
export const getSecondaryDepartmentList = () => get({ url: Api.getSecondaryDepartment });
|
||||
export const allSecondaryDepartsApi = (params) => get(Api.allSecondaryDeparts, params);
|
||||
export const getThreeDepartByOrgCodeApi = (params) => get(Api.getThreeDepartByOrgCode, params);
|
||||
|
||||
@@ -4,7 +4,7 @@ import { normalTypeList, SexType, sexTypeList } from '/@/utils/settings.ts';
|
||||
export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href;
|
||||
export const legend2 = new URL('/@/assets/img/legend5.png', import.meta.url).href;
|
||||
export const legend3 = new URL('/@/assets/img/legend3.png', import.meta.url).href;
|
||||
export function getClassCharts(dx, dy) {
|
||||
export function getClassCharts(dx, dy, m) {
|
||||
return {
|
||||
grid: {
|
||||
top: 40,
|
||||
@@ -50,6 +50,7 @@ export function getClassCharts(dx, dy) {
|
||||
},
|
||||
},
|
||||
interval: 25, // 步长
|
||||
max: m,
|
||||
min: 0, // 起始 - 设置y轴刻度的最小值
|
||||
axisLabel: {
|
||||
color: '#65C6E7',
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-search">
|
||||
<div class="type-select">
|
||||
<div>
|
||||
<a-select v-model:value="selectValue" class="type-select" :options="selectOptions">
|
||||
<a-select-option value="全部数据">全部数据</a-select-option>
|
||||
</a-select>
|
||||
@@ -42,7 +42,7 @@
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { getClassCharts } from '/@/views/indexSun/indexSun.ts';
|
||||
import { twoLApi } from '/@/views/indexSun/indexSun.api.ts';
|
||||
import { allSecondaryDepartsApi, twoLApi } from '/@/views/indexSun/indexSun.api.ts';
|
||||
|
||||
const chooseType = ref('0');
|
||||
const selectValue = ref('all');
|
||||
@@ -52,12 +52,35 @@
|
||||
if (chooseType.value === type) return;
|
||||
chooseType.value = type;
|
||||
getData();
|
||||
// initChart();
|
||||
}
|
||||
onMounted(() => {
|
||||
getData();
|
||||
// initChart();
|
||||
if (selectOptions.value.length === 1) {
|
||||
getAllDepart();
|
||||
}
|
||||
});
|
||||
|
||||
function getAllDepart() {
|
||||
allSecondaryDepartsApi({})
|
||||
.then((res: any) => {
|
||||
if (res.code === 200) {
|
||||
const op: any[] = res?.result
|
||||
? res.result.map((it: any) => {
|
||||
return {
|
||||
label: it.departName,
|
||||
value: it.orgCode,
|
||||
};
|
||||
})
|
||||
: [];
|
||||
selectOptions.value = selectOptions.value.concat(op);
|
||||
} else {
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
const myChart = ref(null);
|
||||
function getData() {
|
||||
twoLApi({
|
||||
@@ -81,7 +104,10 @@
|
||||
value.map((item) => {
|
||||
return item.count;
|
||||
}) || [];
|
||||
let option = getClassCharts(dx, dy);
|
||||
|
||||
const max = value.sort((a, b) => b.count - a.count).length > 0 ? value.sort((a, b) => b.count - a.count)[0].count : [];
|
||||
const m = max % 25 === 0 ? max : (parseInt(max / 25) + 1) * 25;
|
||||
let option = getClassCharts(dx, dy, m);
|
||||
myChart.value.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.value.resize();
|
||||
@@ -123,6 +149,7 @@
|
||||
align-items: center;
|
||||
margin: 5px 10px;
|
||||
.type-select {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.type-time {
|
||||
|
||||
Reference in New Issue
Block a user