update
This commit is contained in:
zk
@@ -13,6 +13,7 @@
|
||||
"@amap/amap-jsapi-loader": "^1.0.1",
|
||||
"axios": "^1.6.2",
|
||||
"dayjs": "^1.11.10",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^3.0.1",
|
||||
"path": "^0.12.7",
|
||||
"prettier": "^3.1.0",
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
@@ -1,4 +1,5 @@
|
||||
import { mapIcon1, mapIcon2, mapIcon3, mapIcon4 } from '/@/components/chinaMap/chinaHooks.ts';
|
||||
import { watchIcon } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
|
||||
/**
|
||||
* @desc 创建icon
|
||||
@@ -33,6 +34,9 @@ export function typeToIcon(type: string) {
|
||||
if (type == '4') {
|
||||
return createIcon({ icon: mapIcon3, iconSize, imageSize });
|
||||
}
|
||||
if (type == '6') {
|
||||
return createIcon({ icon: watchIcon, iconSize: [21, 44], imageSize: [21, 44] });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -2,6 +2,7 @@ import china from '/@/assets/lngLat/china.ts';
|
||||
import chinaInner from '/@/assets/lngLat/chinaInner.ts';
|
||||
import { createCircle, createIcon, typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
|
||||
import { aircraftContent, alarmIcon } from '/@/components/chinaMap/chinaHooks.ts';
|
||||
import { isFunction } from '/@/utils/is.ts';
|
||||
|
||||
export const defaultOption = {
|
||||
center: [106.3, 37.87], //地图中心点
|
||||
@@ -87,7 +88,7 @@ export const Map = {
|
||||
* @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
|
||||
* @param result
|
||||
*/
|
||||
createOverlay(result) {
|
||||
createOverlay(result, { extOption = {}, content }, callback) {
|
||||
this.removeOverlayGroup();
|
||||
this.overlayGroup = new AMap.OverlayGroup();
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
@@ -104,10 +105,12 @@ export const Map = {
|
||||
icon: startIcon, //启用点击事件 如果需要点击事件，必须开启
|
||||
clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
|
||||
extData: result[i],
|
||||
label: {
|
||||
content: isFunction(content) && content(result[i]),
|
||||
},
|
||||
...extOption,
|
||||
});
|
||||
// 可以调用setExtData（）设置自定义属性
|
||||
//startMarker.setExtData('222')
|
||||
|
||||
//将组 挂载到地图上
|
||||
this.overlayGroup.setMap(this.map);
|
||||
//将需要批量控制的点放到一个组中，通过控制组，就可以操作组内所有所有覆盖物
|
||||
@@ -115,10 +118,10 @@ export const Map = {
|
||||
}
|
||||
|
||||
this.overlayGroup.on('click', function (e) {
|
||||
//e.target触发事件的点对象
|
||||
console.log(e.target);
|
||||
//拿到点中携带的数据
|
||||
console.log(e.target.getExtData());
|
||||
// console.log(e.target.getExtData());
|
||||
if (!isFunction(callback)) return;
|
||||
callback(e.target.getExtData());
|
||||
});
|
||||
},
|
||||
clearOverlay() {
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="modal-content">
|
||||
<div class="empty-png"></div>
|
||||
<div class="modal-header">
|
||||
<button type="button" aria-label="Close" class="modal-close">X</button>
|
||||
<div class="modal-title" id="vcDialogTitle0">健康报警员工信息</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="info-left">
|
||||
<div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
|
||||
<div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
|
||||
<div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
|
||||
</div>
|
||||
<div class="info-right">
|
||||
<div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
|
||||
<div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
|
||||
<div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-content {
|
||||
position: relative;
|
||||
//background-clip: padding-box;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
|
||||
.empty-png {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background: url('../../../../assets/images/bg.png') no-repeat;
|
||||
background-position-y: -500px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 6px;
|
||||
z-index: 10;
|
||||
padding: 0;
|
||||
color: #999999;
|
||||
font-weight: 700;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
background: #283545;
|
||||
border-radius: 2px 2px 0 0;
|
||||
position: relative;
|
||||
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
word-wrap: break-word;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: url('../../../../assets/images/dialog.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff !important;
|
||||
padding-left: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
min-height: 150px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5715;
|
||||
word-wrap: break-word;
|
||||
color: #ffffff;
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
padding: 2% 0 2% 5%;
|
||||
display: flex;
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
line-height: 28px;
|
||||
|
||||
.info-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,29 +2,109 @@
|
||||
<div class="center-map">
|
||||
<div class="china-map-box">
|
||||
<div class="form-container">
|
||||
<button @click="test">点击</button>
|
||||
<slot name="rightForm"></slot>
|
||||
</div>
|
||||
<div style="flex: 1; overflow: hidden; margin: 0 0 10px">
|
||||
<div style="flex: 1; overflow: hidden; margin: 0 0 10px; height: 100%">
|
||||
<div id="mapContainer" class="mapContainer"></div>
|
||||
</div>
|
||||
<div v-show="false" id="container"></div>
|
||||
<div v-show="false" id="panel"></div>
|
||||
<div class="footer-data" v-show="true">
|
||||
<div class="empty-png"></div>
|
||||
<div class="col-item" v-for="item in footerList">
|
||||
<div class="col-text">{{ item?.name }}</div>
|
||||
<div class="col-value">{{ item?.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-dialog-con" v-show="false" :class="show ? 'slide-top' : 'slide-bottom'">
|
||||
<FooterDialog></FooterDialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { Map } from '/@/assets/mapUtils/map';
|
||||
import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
|
||||
import { useFooterTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
import { footerApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
|
||||
import { getToday } from '/@/utils/utils.ts';
|
||||
|
||||
const show = ref(false);
|
||||
|
||||
function test() {
|
||||
show.value = !show.value;
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
orgCode: String,
|
||||
type: String,
|
||||
});
|
||||
|
||||
async function getMapData(type, params = {}) {}
|
||||
|
||||
const markerList = [
|
||||
{
|
||||
lon: 109.42,
|
||||
lat: 33.9,
|
||||
type: '6',
|
||||
name: '第一采油厂',
|
||||
},
|
||||
{
|
||||
lon: 106.59,
|
||||
lat: 34.93,
|
||||
type: '6',
|
||||
name: '第二采油厂',
|
||||
},
|
||||
{
|
||||
lon: 109.42,
|
||||
lat: 31.9,
|
||||
type: '6',
|
||||
name: '第三采油厂',
|
||||
},
|
||||
];
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
init();
|
||||
getFooterTable();
|
||||
});
|
||||
|
||||
function initMap() {
|
||||
function init() {
|
||||
Map.initMap({ el: 'mapContainer' });
|
||||
Map.createOverlay(
|
||||
markerList,
|
||||
{
|
||||
content: function (val) {
|
||||
return `<div style="color: red;
|
||||
width: 21px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: -20px;" title="${val.name}">
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
(val) => {
|
||||
console.log('info', val);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const { footerList, setFooterList } = useFooterTable();
|
||||
watch(props, () => {
|
||||
getFooterTable();
|
||||
});
|
||||
|
||||
async function getFooterTable() {
|
||||
const params = {
|
||||
orgCode: 'A01A01' || props.orgCode,
|
||||
// dataDate: getToday(),
|
||||
};
|
||||
const { code, result } = await footerApi(params);
|
||||
if (code == 200) {
|
||||
setFooterList(result.records[0]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@@ -44,16 +124,88 @@
|
||||
|
||||
.form-container {
|
||||
position: absolute;
|
||||
//right: 9px;
|
||||
right: 0;
|
||||
top: 17px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mapContainer {
|
||||
flex: 1;
|
||||
height: calc(100% + 22px);
|
||||
height: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.footer-data {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
|
||||
.empty-png {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background: url('../../../assets/images/bg.png') no-repeat;
|
||||
background-position-y: -500px;
|
||||
}
|
||||
|
||||
.col-item {
|
||||
flex: 1;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
|
||||
.col-text {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: rgba(35, 132, 221);
|
||||
}
|
||||
|
||||
.col-value {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #00152b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
--moveUp: 50px;
|
||||
--moveDown: -50px;
|
||||
|
||||
.footer-dialog-con {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: var(--moveDown);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.slide-top {
|
||||
animation: slide-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
@keyframes slide-top {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(var(--moveDown));
|
||||
}
|
||||
}
|
||||
|
||||
.slide-bottom {
|
||||
animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
}
|
||||
|
||||
@keyframes slide-bottom {
|
||||
0% {
|
||||
transform: translateY(var(--moveDown));
|
||||
}
|
||||
100% {
|
||||
transform: translateY(var(--moveUp));
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -1,11 +1,7 @@
|
||||
import { get } from '/@/api/request.ts';
|
||||
|
||||
export enum Api {
|
||||
allList = '/health-emergency/emergency/tblAmbulanceGps/getAllList',
|
||||
getAmbulanceList = '/health-emergency/emergency/tblAmbulanceGps/getAmbulanceList',
|
||||
footerStatistic = '/health-watch/watch/deptStatisticData/list',
|
||||
}
|
||||
|
||||
// 获取所有资源
|
||||
export const getAllList = (params) => get(Api.allList, params);
|
||||
//获取救护车GPS信息
|
||||
export const getAmbulanceList = (params) => get(Api.getAmbulanceList, params);
|
||||
export const footerApi = (params) => get(Api.footerStatistic, params);
|
||||
@@ -12,30 +12,29 @@
|
||||
// type: TabType.yiLiaoDian,
|
||||
// },
|
||||
// ];
|
||||
|
||||
import {onMounted, ref} from "vue";
|
||||
import {cloneDeep} from 'lodash-es';
|
||||
import {nextTick, onMounted, ref} from "vue";
|
||||
import {allSecondaryDeparts} from "/@/components/secondaryScreen/commonApi";
|
||||
|
||||
export function useDepart({selectOption = [],}) {
|
||||
export const watchIcon = new URL('/@/assets/img/watch.png', import.meta.url).href;
|
||||
|
||||
export function useDepart() {
|
||||
const orgCode = ref();
|
||||
const option = ref([]);
|
||||
const fieldNames = {label: 'departName', value: 'orgCode',}
|
||||
onMounted(() => {
|
||||
if (selectOption && Array.isArray(selectOption) && selectOption.length > 0) {
|
||||
setOption(selectOption);
|
||||
} else {
|
||||
getOptionData();
|
||||
}
|
||||
getOptionData();
|
||||
});
|
||||
|
||||
function setOption(option) {
|
||||
option.value = selectOption || option;
|
||||
function setOption(data) {
|
||||
option.value = data;
|
||||
orgCode.value = data[0]?.orgCode
|
||||
}
|
||||
|
||||
async function getOptionData() {
|
||||
const {result, code} = await allSecondaryDeparts();
|
||||
if (code == 200) {
|
||||
option.value = result;
|
||||
setOption(result)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,4 +66,61 @@ export function useTimeType(t) {
|
||||
type,
|
||||
timeRangeOption
|
||||
}
|
||||
}
|
||||
|
||||
export function useFooterTable() {
|
||||
const footerList = ref([
|
||||
{
|
||||
name: '单位名称',
|
||||
value: '',
|
||||
key: 'orgName'
|
||||
},
|
||||
{
|
||||
name: '单位人数',
|
||||
value: '',
|
||||
key: 'userCount'
|
||||
},
|
||||
{
|
||||
name: '入库设备数量',
|
||||
value: '',
|
||||
key: 'deviceNum'
|
||||
},
|
||||
{
|
||||
name: '佩戴手表人数',
|
||||
value: '',
|
||||
key: 'allotDeviceNum'
|
||||
},
|
||||
{
|
||||
name: '近一周活跃人数',
|
||||
value: '',
|
||||
key: 'sevenDayNum'
|
||||
},
|
||||
{
|
||||
name: '近一月活跃人数',
|
||||
value: '',
|
||||
key: 'a'
|
||||
},
|
||||
{
|
||||
name: '近一年活跃人数',
|
||||
value: '',
|
||||
key: 'b'
|
||||
}
|
||||
])
|
||||
|
||||
function setFooterList(res: any) {
|
||||
|
||||
const arrList = cloneDeep(footerList.value)
|
||||
if (res) {
|
||||
arrList.forEach(item => {
|
||||
item.value = res[item.key] || ''
|
||||
})
|
||||
}
|
||||
footerList.value = arrList
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
footerList,
|
||||
setFooterList
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
const objectToString = Object.prototype.toString;
|
||||
const toTypeString = (value: any) => objectToString.call(value);
|
||||
|
||||
export const { isArray } = Array;
|
||||
export const isMap = (val: any) => toTypeString(val) === '[object Map]';
|
||||
export const isSet = (val: any) => toTypeString(val) === '[object Set]';
|
||||
export const isDate = (val: any) => val instanceof Date;
|
||||
export const isFunction = (val: any) => typeof val === 'function';
|
||||
export const isString = (val: any) => typeof val === 'string';
|
||||
export const isSymbol = (val: any) => typeof val === 'symbol';
|
||||
export const isObject = (val: null) => val !== null && typeof val === 'object';
|
||||
export const isPromise = (val: any) => isObject(val) && isFunction(val.then) && isFunction(val.catch);
|
||||
@@ -22,4 +22,8 @@ export function useTopTime() {
|
||||
timeLeft,
|
||||
timeRight,
|
||||
};
|
||||
}
|
||||
|
||||
export function getToday() {
|
||||
return dayjs().format('YYYY-MM-DD');
|
||||
}
|
||||
+22
-21
@@ -14,17 +14,19 @@
|
||||
</div>
|
||||
<div class="body-d">
|
||||
<div class="body-d-left">
|
||||
<PieCharts/>
|
||||
<template v-for="(item, index) in dataList" :key="`list${index}`">
|
||||
<item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="body-d-middle">
|
||||
<SecondMap>
|
||||
<SecondMap :orgCode="orgCode" :type="type">
|
||||
<template #rightForm>
|
||||
<a-select
|
||||
placeholder="选择单位"
|
||||
v-model:value="orgCode"
|
||||
class="type-select"
|
||||
:options="option"
|
||||
:fieldNames="fieldNames"
|
||||
:field-names="fieldNames"
|
||||
></a-select>
|
||||
<a-select placeholder="选择时间范围" v-model:value="type" class="type-select"
|
||||
:options="timeRangeOption"></a-select>
|
||||
@@ -166,25 +168,24 @@ const {type, timeRangeOption} = useTimeType('week');
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-left {
|
||||
> :nth-child(n) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
.body-d-left {
|
||||
> :nth-child(n) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
width: 140px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
width: 120px;
|
||||
color: #008cff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-d {
|
||||
height: 40px;
|
||||
|
||||
Reference in New Issue
Block a user