renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
zk
2023-12-27 18:00:39 +08:00
parent 63eb01d641
commit 36f484d028
13 changed files with 231 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/info-modal.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

src/assets/less/amap-item.less
+59 -45
View File
@@ -1,65 +1,79 @@
//高德信息弹窗
.amap-info-contentContainer {
.amap-content-body {
background: #00152B;
border: 1px solid #129BFF;
.amap-content-body {
background: #00152B;
border: 1px solid #129BFF;
.amap-lib-infowindow {
background: #00152B;
.amap-lib-infowindow {
background: #00152B;
.amap-lib-infowindow-title {
color: #fff;
border-bottom: 1px solid #129BFF;
padding: 4px 0;
}
.amap-lib-infowindow-title {
color: #fff;
border-bottom: 1px solid #129BFF;
padding: 4px 0;
}
.amap-lib-infowindow-content {
color: #fff;
padding: 4px 0;
}
}
.amap-lib-infowindow-content {
color: #fff;
padding: 4px 0;
}
}
}
.amap-combo-close {
top: 5px;
right: 7px;
}
.amap-combo-close {
top: 5px;
right: 7px;
}
}
/*地图元素样式---start*/
//marker
.amap-marker-label {
padding: 0;
border: none;
padding: 0;
border: none;
}
.alarm-content {
background-color: #263d5e;
background-color: #263d5e;
color: #fff;
font-size: 14px;
padding: 7px 10px;
border: 1px solid #1b7ef2;
position: relative;
.close-btn {
position: absolute;
top: -6px;
right: -8px;
width: 15px;
height: 15px;
font-size: 12px;
background: #ccc;
border-radius: 50%;
color: #fff;
font-size: 14px;
padding: 7px 10px;
border: 1px solid #1b7ef2;
position: relative;
text-align: center;
line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}
.close-btn {
position: absolute;
top: -6px;
right: -8px;
width: 15px;
height: 15px;
font-size: 12px;
background: #ccc;
border-radius: 50%;
color: #fff;
text-align: center;
line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}
.close-btn:hover {
background: #666;
}
.close-btn:hover {
background: #666;
}
}
/*地图元素样式---end*/
/*地图元素样式---end*/
/*infoWindow*/
.amap-info-content {
width: 100%;
height: 100%;
background: url("../images/info-modal.png") no-repeat center;
background-size: 100% 100%;
//padding: 16px 18px 22px 10px;
}
.amap-info-contentContainer {
.amap-info-sharp {
border-top: none;
}
}
src/assets/mapUtils/map.ts
+24
View File
@@ -16,6 +16,7 @@ export const Map = {
airMarkerList: [], //直升机markerList
placeSearch: null, //地点查询
marker: null, // 健康终端报警
infoWindow: null, //地图弹窗
/**
* @desc 地图舒适化
* @param el dom元素 id选择器
@@ -101,6 +102,7 @@ export const Map = {
this.airMarkerList = [];
}
this.clearActiveHospital();
this.clearInfoModal();
// this.map.remove(this.airMarkerList);
}, //
/**
@@ -132,6 +134,8 @@ export const Map = {
position: [lon, lat], // 指定点的icon，也可以是个url ，但这样就不能对图片进行设置了
icon: startIcon, //启用点击事件 如果需要点击事件，必须开启
clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
offset: [-18, -32],
maxZoom: 14,
extData: result[i],
label: {
content: isFunction(extData?.content) && extData?.content(result[i]),
@@ -277,4 +281,24 @@ export const Map = {
this.marker = null;
}
},
/**
* @desc 创建地图详情弹窗
*
* */
createInfoModal({ option, content }) {
let { lat, lng } = option;
this.infoWindow = new AMap.InfoWindow({
position: [lng, lat],
offset: new AMap.Pixel(-5, -25),
content: content,
closeWhenClickMap: true,
});
this.infoWindow.open(this.map);
},
clearInfoModal() {
if (this.infoWindow) {
this.infoWindow?.setMap(null);
this.infoWindow = null;
}
},
};
src/components/chinaMap/chinaMap.vue
+1 -1
View File
@@ -86,7 +86,7 @@
Map.clearActiveHospital();
Map.map.off('moveend', logMapinfo);
if (TabType.diFangYiYuan == item.type) {
Map.clearActiveHospital();
Map.removeOverlayGroup();
Map.map.on('moveend', logMapinfo);
return;
}
src/components/item-d/pieCharts.ts
+17 -4
View File
@@ -79,18 +79,31 @@ export function circleRing(chartData, total, color) {
series: [
{
type: 'pie',
radius: ['50%', '82%'],
center: ['42%', '55%'],
radius: ['50%', '75%'],
center: ['42%', '50%'],
avoidLabelOverlap: false,
// label: {
// show: true,
// // position: 'inner',
// formatter: '{d}%',
// color: '#ffffff',
// fontSize: 14,
// },
// labelLine: {
// show: false,
// },
label: {
show: true,
position: 'inner',
position: 'outside',
formatter: '{d}%',
color: '#ffffff',
fontSize: 14,
},
labelLine: {
show: false,
show: true,
length: 4,
length2: 12,
minTurnAngle: 120,
},
data: data,
},
src/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue
+1
View File
@@ -126,6 +126,7 @@
.ant-table-striped :deep(.table-striped) td {
background-color: #00152b;
border-bottom: 1px solid #2384dd;
padding: 10px 4px !important;
}
:deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
src/components/secondaryScreen/secondMap/components/footerDialog.vue
+13 -4
View File
@@ -1,15 +1,21 @@
<template>
<div class="modal-content">
<!-- <div class="empty-png"></div>-->
<div class="modal-header">
<button type="button" aria-label="Close" class="modal-close" @click="closeDialog">X</button>
<div class="modal-title" id="vcDialogTitle0">健康报警员工信息</div>
</div>
<div class="modal-body">
<div class="info-left">
<div v-for="item in detailLeft" :key="item.key"
><span class="info-label">{{ item.name }}：</span><span class="info-value">{{ item.value }}</span></div
>
<div v-for="item in detailLeft" :key="item.key">
<template v-if="item.customRender">
<span class="info-label">{{ item.name }}：</span>
<span class="info-value"> {{ item.customRender(item.value) }}</span>
</template>
<template v-else>
<span class="info-label">{{ item.name }}：</span>
<span class="info-value">{{ item.value }}</span>
</template>
</div>
</div>
<div class="info-right">
<div v-for="item in detailRight" :key="item.key"
@@ -95,7 +101,10 @@
line-height: 28px;
.info-label {
display: inline-flex;
font-weight: bold;
width: 70px;
justify-content: flex-end;
}
}
}
src/components/secondaryScreen/secondMap/components/userInfoModal/motion.vue
+1 -45
View File
@@ -7,23 +7,6 @@
:keyType="keyType"
:user-id="userId"
/>
<!-- <div class="item-three" style="display: flex; justify-content: center">-->
<!-- <div style="width: 15%; text-align: center">-->
<!-- <div>-->
<!-- <span style="font-size: 25px"> {{ maxInfo > 1000 ? (maxInfo / 1000).toFixed(2) : maxInfo }}</span>-->
<!-- <span style="color: #aa9db6">{{ maxInfo > 1000 ? 'km' : 'm' }}</span>-->
<!-- </div>-->
<!-- <div style="color: #aa9db6">总运动距离</div>-->
<!-- </div>-->
<!-- <div style="width: 15%; text-align: center">-->
<!-- <div>-->
<!-- <span style="font-size: 25px"> {{ minInfo > 1000 ? (minInfo / 1000).toFixed(2) : minInfo }}</span>-->
<!-- <span style="color: #aa9db6">{{ minInfo > 1000 ? '千卡' : '卡' }}</span>-->
<!-- </div>-->
<!-- <div style="color: #aa9db6">总卡路里</div>-->
<!-- </div>-->
<!-- </div>-->
<BasicTable :key="refresh" :columns="motionColumns" :api="queryExercisePageApi" :api-params="apiParams" :afterFetch="afterFetch" />
</template>
<script setup lang="ts">
@@ -39,10 +22,7 @@
const type = ref(1);
const status = ref<boolean>(true);
const value = ref(dayjs(new Date()).format('YYYY-MM-DD'));
const maxInfo = ref();
const minInfo = ref();
const motionType = ref();
const props = defineProps({
userId: propTypes.string.def(''),
keyType: propTypes.string.def('6'),
@@ -89,29 +69,5 @@
motionType.value = s;
tableReload();
}
function getParams() {
let params = {
flag: type.value,
userId: props.userId,
type: motionType.value,
};
switch (type.value) {
case 1:
params['dateDay'] = value.value;
break;
case 2:
params['dateWeekStart'] = value.value.substring(0, value.value.indexOf('~') - 1);
params['dateWeekEnd'] = value.value.substring(value.value.indexOf('~') + 2);
break;
case 3:
params['dateMonth'] = value.value;
break;
case 4:
params['dateYear'] = value.value;
break;
}
return params;
}
</script>
<style scoped lang="less"></style>
<style scoped lang="less"></style>
src/components/secondaryScreen/secondMap/components/userInfoModal/publicTitle.vue
+12 -4
View File
@@ -1,4 +1,5 @@
<template>
<!--周月年 -->
<div
class="public-title"
style="display: flex; align-items: center; justify-content: center; position: relative"
@@ -15,12 +16,18 @@
{{ showStatus ? '列表展示' : '图表展示' }}
</div>
</div>
<div
class="public-title"
style="display: flex; justify-content: center; margin-top: 20px; align-items: center; position: relative"
:style="{ minHeight: props.showList ? '' : '30px' }"
>
<div class="fff" style="position: absolute; left: 10px; display: flex; align-items: center; color: #fff" v-if="!props.showList">
<!-- 锻炼类型-->
<div
class="fff"
style="position: absolute; left: 10px; display: flex; align-items: center; color: #fff; margin-bottom: 10px"
v-if="!props.showList"
>
锻炼类型：
<a-select
v-model:value="motionType"
@@ -30,7 +37,8 @@
@change="changeSelect"
></a-select>
</div>
<div style="display: flex; font-size: 20px; align-items: center" v-if="showStatus && props.showList">
<!--日期-->
<div style="display: flex; font-size: 20px; align-items: center; gap: 10px" v-if="showStatus && props.showList">
<a-button class="btn" type="primary" size="small" @click="changeDate('0')">
<LeftOutlined class="icon" style="color: #fff" />
</a-button>
@@ -51,7 +59,7 @@
</div>
</template>
</a-date-picker>
<div style="z-index: 1; min-width: 150px; text-align: center; color: #fff">{{ getDateFormat(dateInfo) }} </div>
<div style="z-index: 1; min-width: 150px; text-align: center; color: #fff">{{ getDateFormat(dateInfo) }}</div>
</div>
<a-button class="btn" type="primary" :disabled="!isRight" size="small" @click="changeDate('1')">
<RightOutlined class="icon" style="color: #fff" />
@@ -284,4 +292,4 @@
box-shadow: none;
}
}
</style>
</style>
src/components/secondaryScreen/secondMap/components/userInfoModal/temperature.vue
+4 -1
View File
@@ -139,6 +139,9 @@
{
type: 'value',
name: '温度',
nameTextStyle: {
color: '#fff',
},
axisLabel: {
color: '#fff',
},
@@ -205,4 +208,4 @@
initEchart('0');
});
</script>
<style scoped lang="less"></style>
<style scoped lang="less"></style>
src/components/secondaryScreen/secondMap/secondMap.vue
+36 -13
View File
@@ -9,7 +9,6 @@
</div>
<div v-show="false" id="container"></div>
<div v-show="false" id="panel"></div>
<!-- <div v-show="isShow" :class="className" class="footer-data" style="&#45;&#45;moveUp: 120px; &#45;&#45;moveDown: -80px">-->
<div v-show="isShow" :class="className" class="footer-data" style="--moveUp: 20px; --moveDown: -80px">
<div
v-for="item in footerList"
@@ -39,10 +38,9 @@
import $bus from '/@/utils/bus.ts';
import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
import WatchListDialog from '/@/components/secondaryScreen/secondMap/components/watchListDialog.vue';
import { useAlarmDetail, useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
import { infoContent, useAlarmDetail, useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
import { footerApi, mapListApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
import { earlyWarning } from '/@/utils/busConstant.ts';
import { getToday } from '/@/utils/utils.ts';
const props = defineProps({
orgCode: String,
@@ -71,26 +69,24 @@
const { footerList, setFooterList, setIsShowAlarm, isShowAlarm } = useFooterTable();
async function getFooterTable(orgCode) {
const params = {
let params = {
orgCode: orgCode || props.orgCode,
// dataDate: getToday(),
};
const { code, result } = await footerApi(params);
if (code == 200) {
setIsShow(true);
setFooterList(result);
}
}
async function getMapList() {
let orgCode = props.orgCode?.substring(0, 6);
getFooterTable(orgCode);
try {
const { code, result } = await mapListApi({ orgCode: props.orgCode });
if (code == 200 && result.length > 0) {
const newArr = result.map((item) => ({ ...item, type: '6' }));
mapList.value = newArr;
let orgCode = newArr[0].orgCode?.substring(0, 6);
getFooterTable(orgCode);
setIsShow(true);
Map.createOverlay(
newArr,
{
@@ -104,14 +100,20 @@
</div>`;
},
},
(val) => {
getFooterTable(val.orgCode?.substring(0, 6));
setIsShow(true);
async (val) => {
let params = {
orgCodeLeaf: val.orgCode,
orgCode: null,
};
const { code, result } = await footerApi(params);
if (code == 200) {
Map.createInfoModal({ option: val, content: infoContent(result) });
setIsShow(true);
}
}
);
} else {
Map.removeOverlayGroup();
setIsShow(false);
}
} catch {}
}
@@ -246,4 +248,25 @@
}
}
}
:deep(.watch-modal) {
width: 300px;
height: 190px;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 10px;
.modal-row {
font-size: 16px;
line-height: 34px;
color: #fff;
.label {
display: inline-flex;
justify-content: flex-end;
width: 140px;
}
}
}
</style>
src/components/secondaryScreen/secondMap/secondMapHooks.ts
+57 -19
View File
@@ -80,12 +80,6 @@ export function useFooterTable() {
key: 'userCount',
extData: {},
},
// {
// name: '入库设备数量',
// value: '',
// key: 'deviceNum',
// extData: {},
// },
{
name: '佩戴手表人数',
value: '',
@@ -104,12 +98,6 @@ export function useFooterTable() {
key: 'thirtyDayNum',
extData: {},
},
{
name: '近一年活跃人数',
value: '',
key: 'yearDayNum',
extData: {},
},
]);
function setFooterList(res: any) {
@@ -148,6 +136,18 @@ export function useAlarmDetail() {
value: '',
key: 'orgName2',
},
{
name: '位置',
value: '',
key: '',
customRender: (record) => {
if (record?.lat) {
return `${record.lat},${record.lon}`;
} else {
return '未知位置';
}
},
},
]);
const detailRight = ref([
{
@@ -175,10 +175,18 @@ export function useAlarmDetail() {
function setDetail(res) {
if (res) {
detailLeft.value.forEach((item) => {
item.value = res[item.key];
if (item.customRender) {
item.value = res;
} else {
item.value = res[item.key];
}
});
detailRight.value.forEach((item) => {
item.value = res[item.key];
if (item.customRender) {
item.value = res;
} else {
item.value = res[item.key];
}
});
}
}
@@ -238,7 +246,7 @@ export function useTree() {
export const columns = [
{
title: '员工名称',
title: '员工姓名',
dataIndex: 'realName',
align: 'center',
key: 'realName',
@@ -248,18 +256,21 @@ export const columns = [
dataIndex: 'orgName',
align: 'center',
key: 'orgName',
ellipsis: true,
},
{
title: '部门名称',
dataIndex: 'orgName1',
align: 'center',
key: 'orgName1',
ellipsis: true,
},
{
title: '工具编码',
dataIndex: 'watchNo',
align: 'center',
key: 'watchNo',
ellipsis: true,
},
{
title: '心率（次/分）',
@@ -314,14 +325,41 @@ export const columns = [
];
export function useChangeTable() {
const refresh = ref(true)
const refresh = ref(true);
function setRefresh() {
refresh.value = !refresh.value
refresh.value = !refresh.value;
}
return {
refresh,
setRefresh
}
setRefresh,
};
}
export function infoContent(res) {
return `
<div class="watch-modal">
<div class="modal-row">
<span class="label">部门名称：</span>
<span class="text">${res?.orgName}</span>
</div>
<div class="modal-row">
<span class="label">部门人数：</span>
<span class="text">${res?.userCount}</span>
</div>
<div class="modal-row">
<span class="label">佩戴手表人数：</span>
<span class="text">${res?.allotDeviceNum}</span>
</div>
<div class="modal-row">
<span class="label">近一周活跃人数：</span>
<span class="text">${res?.sevenDayNum}</span>
</div>
<div class="modal-row">
<span class="label">近一月人数：</span>
<span class="text">${res?.thirtyDayNum}</span>
</div>
</div>
`;
}
src/views/sys/login.vue
+6
View File
@@ -99,6 +99,8 @@
import { t } from '/@/hooks/locales/useLocales.ts';
import { encipher } from '/@/utils/jsencrypt';
import { useRouter } from 'vue-router';
import { getAuthCache } from '/@/utils/auth.ts';
import { TOKEN_KEY } from '/@/enum/cacheEnum.ts';
const router = useRouter();
// console.log(t('login'));
@@ -203,6 +205,10 @@
onMounted(() => {
//加载验证码
handleChangeCheckCode();
let token = getAuthCache(TOKEN_KEY);
if (token) {
router.push({ path: '/home' });
}
});
</script>