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-15 18:33:04 +08:00
parent d614f10bb5
commit 2cc8886c2d
31 changed files with 820 additions and 582 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.development
+5
View File
@@ -2,3 +2,8 @@
VITE_GLOB_API_URL=http://192.168.1.6
#开发环境
#VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io
#应急求助-websocket
VITE_GLOB_API_YIN_JI=ws://192.168.1.6:7098/websocket/watchMonitor
#健康监测工具报警-websocket
VITE_GLOB_API_JIAN_CE=ws://192.168.1.6:7011/websocket/emergency
package.json
+2 -1
View File
@@ -4,13 +4,14 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --open",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
},
"dependencies": {
"@amap/amap-jsapi-loader": "^1.0.1",
"@iamzzg/data-view": "^2.10.0",
"axios": "^1.6.2",
"dayjs": "^1.11.10",
"lodash-es": "^4.17.21",
src/api/request.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { getAppEnvConfig } from '../utils/env.ts';
const { VITE_GLOB_API_URL } = getAppEnvConfig();
let token =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAyMDA1MDQ4fQ.M1Xlecj3eUOgZUSofOlyBMoxJ5F01KH-tgJxaV2Femc\n';
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAzMjMyOTQ0fQ.de0NagvCsVmg_sZGoE5PirZcdDRXPX-j9yj3AqbV6t4';
const service = axios.create({
baseURL: VITE_GLOB_API_URL,
timeout: 50000,
src/assets/images/doctors1.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 201 KiB

src/assets/images/doctors2.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 166 KiB

src/assets/images/doctors3.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 163 KiB

src/assets/images/doctors4.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 45 KiB

After

Width:  |  Height:  |  Size: 172 KiB

src/assets/less/amap-item.less
+44 -39
View File
@@ -1,59 +1,64 @@
//高德信息弹窗
.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;
}
}
}
/*地图元素样式---start*/
//marker
.amap-marker-label {
padding: 0;
padding: 0;
}
.alarm-content {
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%;
background-color: #263d5e;
color: #fff;
text-align: center;
line-height: 15px;
box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
}
font-size: 14px;
padding: 7px 10px;
border: 1px solid #1b7ef2;
position: relative;
.close-btn:hover {
background: #666;
}
.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;
}
}
/*地图元素样式---end*/
src/assets/less/index.less
+71 -68
View File
@@ -1,146 +1,149 @@
@import "./amap-item";
.type-time {
padding-right: 4%;
padding-top: 3%;
font-size: 16px;
display: flex;
justify-content: right;
padding-right: 4%;
padding-top: 3%;
font-size: 16px;
display: flex;
justify-content: right;
span {
padding: 0 2%;
cursor: pointer;
}
.select {
color: #45a2ff;
position: relative;
&:after {
content: '';
position: absolute;
display: block;
width: 72%;
left: 6px;
bottom: -12px;
height: 6px;
background: url('../images/light.png') no-repeat;
background-size: 100% 100%;
span {
padding: 0 2%;
cursor: pointer;
}
}
.unSelect {
color: #a3a4a4;
}
.select {
color: #45a2ff;
position: relative;
&:after {
content: '';
position: absolute;
display: block;
width: 72%;
left: 6px;
bottom: -12px;
height: 6px;
background: url('../images/light.png') no-repeat;
background-size: 100% 100%;
}
}
.unSelect {
color: #a3a4a4;
}
}
*::-webkit-scrollbar {
width: 12px;
height: 12px;
width: 12px;
height: 12px;
}
*::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
width: 0;
height: 0;
display: none;
}
*::-webkit-scrollbar-corner {
background-color: transparent;
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
height: 6px;
border-radius: 25px;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.3);
border: 4px solid rgba(0, 0, 0, 0);
height: 6px;
border-radius: 25px;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.3);
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ant-modal-mask {
background-color: rgba(0, 0, 0, 0.65) !important;
background-color: rgba(0, 0, 0, 0.65) !important;
}
// 下拉框样式-start
.ant-select-dropdown {
background-color: #00152b !important;
border-right: 1px solid #1b7ef2;
border-left: 1px solid #1b7ef2;
border-bottom: 1px solid #1b7ef2;
background-color: #00152b !important;
border-right: 1px solid #1b7ef2;
border-left: 1px solid #1b7ef2;
border-bottom: 1px solid #1b7ef2;
}
.ant-select-item {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
//框背景色
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
color: #1b7ef2 !important;
background-color: transparent !important;
border: 1px solid #1b7ef2 !important;
color: #1b7ef2 !important;
background-color: transparent !important;
border: 1px solid #1b7ef2 !important;
}
.ant-select-item-option-selected {
color: #ffffff !important;
color: #ffffff !important;
}
// 选中字体颜色
.ant-select-selection-item {
//color: #1b7ef2 !important;
color: #fff;
//color: #1b7ef2 !important;
color: #fff;
}
.ant-select-item-option-active {
background-color: transparent !important;
background-color: transparent !important;
}
.ant-select-item-option-active:hover {
background-color: #002e64 !important;
background-color: #002e64 !important;
}
// 箭头颜色
.ant-select-arrow {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: #002e64 !important;
background-color: #002e64 !important;
}
// 下拉框样式-end
// 级联选择器样式-start
.ant-cascader-menu-item {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
.ant-cascader-menu-item:hover {
background-color: #002e64 !important;
background-color: #002e64 !important;
}
.ant-cascader-menu-item-active {
color: #fff !important;
background-color: #002e64 !important;
color: #fff !important;
background-color: #002e64 !important;
}
.ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
// 级联选择器样式-end
.ant-empty-description {
color: #fff;
}
//直升机
.helicopter {
width: 60px;
height: 37px;
background: url("../img/helicopter.png") no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
width: 60px;
height: 37px;
background: url("../img/helicopter.png") no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
}
src/assets/mapUtils/map.ts
+40 -22
View File
@@ -3,6 +3,7 @@ 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';
import { Callback, ExtDataType, InitMap, MarkerOption, ResultType } from '/@/assets/mapUtils/mapFunTypes.ts';
export const defaultOption = {
center: [106.3, 37.87], //地图中心点
@@ -23,7 +24,7 @@ export const Map = {
* @param el dom元素 id选择器
* @param option 地图配置
*/
initMap({ el, option }) {
initMap({ el, option }: InitMap) {
const { zoom, center, mapStyle } = { ...defaultOption, ...option };
//基本地图加载
this.map = new AMap.Map(el, {
@@ -43,7 +44,7 @@ export const Map = {
drawOutLine() {
let geoJson = new AMap.GeoJSON({
geoJSON: china,
getPolygon: function (geoJson, lngLats) {
getPolygon: function (geoJson: string, lngLats: any) {
return new AMap.Polyline({
path: lngLats[0],
strokeColor: '#6ccffe',
@@ -62,7 +63,7 @@ export const Map = {
drawInnerLine() {
let geoJson = new AMap.GeoJSON({
geoJSON: chinaInner,
getPolygon: function (geoJson, lngLats) {
getPolygon: function (geoJson: string, lngLats: any) {
return new AMap.Polyline({
path: lngLats[0],
strokeColor: '#359de5',
@@ -71,24 +72,35 @@ export const Map = {
},
});
this.map.add(geoJson);
}, // 清空当前地图上除了边界线的覆盖物
},
/**
* @desc 设置地图级别与中心点
* @param center 【lon,lat】
* @param zoom 地图层级
* */
setZoomCenter(center, zoom = 12) {
this.map && this.map.setZoomAndCenter(zoom, center);
},
/**
* @desc 清空当前地图上除了边界线的覆盖物
*/
removeOverlayGroup() {
this.clearAircraft();
this.clearOverlay();
this.clearAirRange();
this.clearMarker(); //
if (this.airMarkerList.length > 0) {
for (let i = 0; i < this.airMarkerList.length; i++) {
this.airMarkerList[i].setMap(null);
}
if (this.airMarkerList) {
this.airMarkerList = [];
}
// this.map.remove(this.airMarkerList);
}, //
/**
* @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
* @param result
* @param extData
* @param callback
*/
createOverlay(result, { extOption = {}, content }, callback) {
createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback) {
this.removeOverlayGroup();
this.overlayGroup = new AMap.OverlayGroup();
for (let i = 0; i < result.length; i++) {
@@ -101,6 +113,7 @@ export const Map = {
}
// 创建一个 Icon
let startIcon = typeToIcon(type);
// debugger;
// 将 icon 传入 marker
let startMarker = new AMap.Marker({
// 点的坐标
@@ -109,9 +122,9 @@ export const Map = {
clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
extData: result[i],
label: {
content: isFunction(content) && content(result[i]),
content: isFunction(extData?.content) && extData?.content(result[i]),
},
...extOption,
...extData?.extOption,
});
// 可以调用setExtData（）设置自定义属性
//将组 挂载到地图上
@@ -139,9 +152,11 @@ export const Map = {
* @desc 创建直升机marker
* @param result
*/
createAircraft(result) {
createAircraft(result: ResultType[]) {
console.log('result', result);
this.removeOverlayGroup();
this.clearActiveHospital();
// debugger;
if (!Array.isArray(result) && result.length == 0) return;
this.createAirRange(result);
let that = this;
@@ -152,6 +167,7 @@ export const Map = {
arr,
{
renderMarker: (context) => {
console.log('context', context);
let factor = Math.pow(context.count / count, 1 / 18);
let div = document.createElement('div');
div.className = 'render-air';
@@ -163,25 +179,26 @@ export const Map = {
div.style.fontSize = '14px';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div);
this.airMarkerList.push(context.marker);
context.marker.on('click', () => {
console.log('data', context);
});
// this.airMarkerList.push(context.marker);
// context.marker.on('click', () => {
// console.log('data', context);
// });
},
}
);
this.cluster.setMap(this.map);
// this.cluster.setMap(this.map);
},
clearAircraft() {
if (this.cluster) {
this.map.remove(this.cluster);
this.cluster = null;
this.cluster.setMap(null);
// this.map.remove(this.cluster);
// this.cluster = null;
}
} /**
* @desc 飞机范围
* @param list
*/,
createAirRange(list) {
createAirRange(list: ResultType[]) {
this.removeOverlayGroup();
this.circleGroup = new AMap.OverlayGroup();
for (let i = 0; i < list.length; i++) {
@@ -223,17 +240,18 @@ export const Map = {
this.placeSearch = null;
}
},
createMarker(option, callbck: () => {}) {
createMarker(option: MarkerOption, callbck?: Callback) {
this.clearMarker();
let { lon, lat, zoom = 12 } = option;
const icon = createIcon({ icon: alarmIcon, iconSize: [36, 42], imageSize: [36, 42] });
let str = option?.realName && option?.eventType_dictText ? `${option?.realName},${option?.eventType_dictText}` : `${option?.realName}`;
this.marker = new AMap.Marker({
position: [lon, lat],
icon: icon,
offset: new AMap.Pixel(0, 0), //设置偏移量
label: {
content: `<div class="alarm-content" >
<div>${option?.realName},${option?.eventType_dictText}</div>
<div>${str}</div>
</div>`,
offset: new AMap.Pixel(0, -9),
direction: 'top',
src/assets/mapUtils/mapFunTypes.ts
+27
View File
@@ -0,0 +1,27 @@
export interface InitMap {
el: string;
option: any;
}
export type Callback = (result?: any) => void;
export interface ResultType {
lon?: number;
lat?: number;
lng?: number;
type?: string;
name?: string;
}
export interface ExtDataType {
extOption?: object;
content?: string;
}
export interface MarkerOption {
lon?: number;
lat?: number;
zoom?: number;
[k: string]: any;
}
src/assets/ts/antd.ts
+2 -1
View File
@@ -1,6 +1,7 @@
import type { App } from 'vue';
import { Form, Input, Button, Radio, Modal, Table, Select, Cascader, Spin, ConfigProvider } from 'ant-design-vue';
import dataV from '@iamzzg/data-view/dist/vue3/datav.map.vue.esm';
export default function registerGlobComp(app: App) {
app.use(Button).use(Form).use(Input).use(Radio).use(Modal).use(Table).use(Select).use(Cascader).use(Spin).use(ConfigProvider);
app.use(dataV).use(Button).use(Form).use(Input).use(Radio).use(Modal).use(Table).use(Select).use(Cascader).use(Spin).use(ConfigProvider);
}
src/components/body-d-right/bodyRightHooks.ts
+2 -1
View File
@@ -134,7 +134,8 @@ export function ringOption(chartData, total) {
series: [
{
type: 'pie',
radius: ['50%', '80%'],
radius: ['50%', '74%'],
center: ['50%', '47%'],
avoidLabelOverlap: false,
label: {
show: true,
src/components/body-d-right/threeR.vue
+22 -4
View File
@@ -2,10 +2,10 @@
<div>
<public-title title="基层医疗点远程会诊" />
<div class="inner">
<div class="inner-item"></div>
<div class="inner-item"></div>
<div class="inner-item"></div>
<div class="inner-item"></div>
<div class="inner-item" data-text="应急就医-服务中心"></div>
<div class="inner-item" data-text="采油九厂-薛岔作业区"></div>
<div class="inner-item" data-text="第九采油厂-五谷城作业区"></div>
<div class="inner-item" data-text="采油十一厂-彭阳作业区"></div>
</div>
</div>
</template>
@@ -21,22 +21,40 @@
justify-content: space-around;
align-content: space-around;
padding-top: 2%;
.inner-item {
width: 48%;
height: 46%;
position: relative;
}
.inner-item:nth-child(1) {
background: url('../../assets/images/doctors1.png') no-repeat;
background-size: 100% 100%;
}
.inner-item:after {
position: absolute;
content: attr(data-text);
color: #fff;
bottom: 0px;
left: 0px;
width: 100%;
text-align: left;
padding-left: 10px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
}
.inner-item:nth-child(2) {
background: url('../../assets/images/doctors2.png') no-repeat;
background-size: 100% 100%;
}
.inner-item:nth-child(3) {
background: url('../../assets/images/doctors3.png') no-repeat;
background-size: 100% 100%;
}
.inner-item:nth-child(4) {
background: url('../../assets/images/doctors4.png') no-repeat;
background-size: 100% 100%;
src/components/chinaMap/chinaMap.vue
+19 -15
View File
@@ -9,10 +9,10 @@
<div v-show="currentIndex == list.length - 1" class="route-navigation">
<a-form :model="formState" layout="inline">
<a-form-item class="form-item-self" label="起点">
<a-input v-model:value="formState.start"></a-input>
<a-input v-model:value="formState.start" placeholder="请输入起点"></a-input>
</a-form-item>
<a-form-item class="form-item-self" label="终点">
<a-input v-model:value="formState.end"></a-input>
<a-input v-model:value="formState.end" placeholder="请输入终点"></a-input>
</a-form-item>
<a-form-item>
<a-button class="reset-btn" @click="removeInput">清空</a-button>
@@ -74,34 +74,28 @@
}
const formState = ref({
start: '西安北站',
start: '',
end: '',
});
const list = ref(tabList);
const currentIndex = ref(0);
function changeTab(item, i: number) {
// if (i == currentIndex.value) {
// return;
// }
currentIndex.value = i; // 地方医院
Map.clearActiveHospital();
Map.map.off('moveend', logMapinfo);
if (TabType.diFangYiYuan == item.type) {
Map.clearActiveHospital();
Map.map.on('moveend', logMapinfo);
// debugger;
return;
} else {
Map.clearActiveHospital();
Map.map.off('moveend', logMapinfo);
}
// 直升机
if (TabType.zhiShengJi == item.type) {
Map.createAircraft(aircraft);
return;
} else {
getMapData(item.type, { type: item.type });
}
getMapData(item.type, { type: item.type });
}
function logMapinfo() {
@@ -123,7 +117,17 @@
try {
const { code, result } = await mapApiSwitch(type, params);
if (code == 200 && Array.isArray(result) && result.length > 0) {
Map.createOverlay(result);
Map.createOverlay(result, {
content: (val) => {
return `<div style="
width: 21px;
height: 44px;
position: absolute;
left: -20px;
top: -20px;" title="${val?.name}">
</div>`;
},
});
}
} catch (e) {
console.log('error------------------------------');
src/components/item-d/item-d.vue
+92 -65
View File
@@ -1,76 +1,103 @@
<template>
<div>
<public-title :title="props.title">
<template #right>
{{ props.tips }}
</template>
</public-title>
<div class="inner" ref="healthChart"></div>
</div>
<div class="left-pie">
<public-title :title="props.title">
<template #right>
{{ props.tips }}
</template>
</public-title>
<div class="inner" ref="healthChart"></div>
<div class="count" v-show="props.tips">
<div class="t">总人数</div>
<div class="v">{{ userCount }}</div>
</div>
</div>
</template>
<script setup lang="ts">
import PublicTitle from '/@/components/publicTitle.vue';
import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
import {screenPie} from '/@/components/item-d/pieCharts.ts';
import {onMounted, ref, unref, watch, defineProps} from 'vue';
import * as echarts from 'echarts';
import PublicTitle from '/@/components/publicTitle.vue';
import { circleRing } from '/@/components/item-d/pieCharts.ts';
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
title: {
type: String,
default: () => '',
},
data: {
type: Array,
default: () => [],
},
color: {
type: Array,
default: () => [],
},
tips: {
type: String,
default: () => '',
},
});
const healthChart = ref<HTMLElement>();
const props = defineProps({
title: {
type: String,
default: () => '',
},
data: {
type: Array,
default: () => [],
},
color: {
type: Array,
default: () => [],
},
tips: {
type: String,
default: () => '',
},
userCount: {
type: Number,
},
});
const healthChart = ref<HTMLElement>();
onMounted(() => {
init();
});
const {setSpin, spinning} = useSpin();
watch(
() => props.data,
() => {
init();
}
);
onMounted(() => {
init();
});
watch(
() => props.data,
() => {
init();
async function init() {
initChart(props.data, props.userCount, props.color);
}
);
const {healthData, getValue, setHealth} = useHealth();
async function init() {
// setHealth(props.data);
// const yData = unref(getValue);
// let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
initChart(props.data, 78, props.color);
}
function initChart(chartData, total, color) {
let myChart = echarts.init(healthChart.value);
let options = screenPie(chartData, total, color, '{d}%');
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
});
}
function initChart(chartData, total, color) {
let myChart = echarts.init(healthChart.value);
let options = circleRing(chartData, total, color, '{d}%');
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
});
}
</script>
<style scoped lang="less">
.inner {
width: 100%;
margin: 0 auto;
height: calc(100% - 40px);
}
.inner {
width: 100%;
margin: 0 auto;
height: calc(100% - 40px);
}
.left-pie {
position: relative;
padding-bottom: 0 !important;
}
.count {
position: absolute;
width: 80%;
top: 51%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 22px;
font-weight: bold;
z-index: 1;
pointer-events: none;
> div {
width: 80px;
z-index: 0;
}
.t {
font-size: 14px;
font-weight: normal;
}
}
</style>
src/components/item-d/pieCharts.ts
+47 -28
View File
@@ -1,37 +1,56 @@
export function screenPie(chartData, total, color, formatter) {
return {
title: {
text: '总人数',
color: color,
tooltip: {
trigger: 'item',
show: true,
textStyle: {
fontSize: 14,
color: '#ffffff',
fontWeight: 'normal',
align: 'center',
color: '#fff',
},
subtext: total + '',
x: '38%',
y: '42%',
subtextStyle: {
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#1b7ef2',
},
legend: {
left: '74%',
top: 'center',
orient: 'vertical',
icon: 'circle',
itemGap: 8,
textStyle: {
color: '#ffffff',
fontSize: 24,
fontWeight: 'bold',
fontSize: 16,
},
},
// graphic: [
// {
// //环形图中间添加文字
// type: 'text', //通过不同top值可以设置上下显示
// left: 'center',
// top: 'center',
// style: {
// text: 45465456,
// textAlign: 'center',
// fill: '#1E7CE8', //文字的颜色
// fontSize: 20,
// lineHeight: 20,
// },
// },
// ],
series: [
{
type: 'pie',
// radius: ['50%', '86%'],
// center: ['42%', '55%'],
radius: ['50%', '76%'],
center: ['42%', '49%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside',
formatter: formatter,
color: '#ffffff',
fontSize: 14,
},
labelLine: {
show: true,
length: 6,
length2: 20,
minTurnAngle: 120,
},
data: chartData,
},
],
};
}
//左侧圆
export function circleRing(chartData, total, color, formatter) {
return {
color: color,
tooltip: {
trigger: 'item',
@@ -56,7 +75,7 @@ export function screenPie(chartData, total, color, formatter) {
series: [
{
type: 'pie',
radius: ['50%', '86%'],
radius: ['50%', '82%'],
center: ['42%', '55%'],
avoidLabelOverlap: false,
label: {
src/components/secondaryScreen/screen-left/screenLeft.vue
+35 -16
View File
@@ -1,11 +1,12 @@
<template>
<template v-for="(item, index) in dataList" :key="`list${index}`">
<item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
<item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" :userCount="item.userCount" />
</template>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { cloneDeep } from 'lodash-es';
import ItemD from '/@/components/item-d/item-d.vue';
import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
@@ -13,43 +14,51 @@
{
title: '心率',
data: [
{ name: '正常', value: 234 },
{ name: '警戒', value: 204 },
{ name: '危险', value: 34 },
{ name: '正常', value: 0, key: 'normalCount' },
{ name: '警戒', value: 0, key: 'warnCount' },
{ name: '危险', value: 0, key: 'riskCount' },
],
type: '1',
color: ['#0098FA', '#FF6648', '#FB466C'],
tips: '正常范围60~100次/分',
userCount: '',
},
{
title: '血氧',
data: [
{ name: '正常', value: 234 },
{ name: '警戒', value: 204 },
{ name: '危险', value: 34 },
{ name: '正常', value: 0, key: 'normalCount' },
{ name: '警戒', value: 0, key: 'warnCount' },
{ name: '危险', value: 0, key: 'riskCount' },
],
type: '2',
color: ['#0098FA', '#FF6648', '#FB466C'],
tips: '血氧饱和度范围95%~100%',
userCount: '',
},
{
title: '压力',
data: [
{ name: '正常', value: 234 },
{ name: '放松', value: 204 },
{ name: '中等', value: 34 },
{ name: '偏高', value: 78 },
{ name: '正常', value: 0, key: 'normalCount' },
{ name: '放松', value: 0, key: 'unwindCount' },
{ name: '中等', value: 0, key: 'warnCount' },
{ name: '偏高', value: 0, key: 'riskCount' },
],
type: '3',
color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
tips: '',
userCount: '',
},
{
title: '体温',
data: [
{ name: '37.2', value: 234 },
{ name: '37.2-38', value: 204 },
{ name: '>38', value: 34 },
{ name: '37.2', value: 0, key: 'normalCountCount' },
{ name: '37.2-38', value: 0, key: 'warnCount' },
{ name: '>38', value: 0, key: 'riskCount' },
],
type: '5',
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
tips: '',
userCount: '',
},
]);
@@ -63,8 +72,18 @@
});
async function init() {
const data = await getWatchDataByOrgCode(props);
console.log('data', data);
const { code, result } = await getWatchDataByOrgCode(props);
if (code == 200) {
let data = cloneDeep(dataList.value);
data.forEach((item) => {
let resData = result.find((v) => v.type == item.type);
item.userCount = resData.userCount;
item.data.forEach((val) => {
val.value = resData[val.key];
});
});
dataList.value = data;
}
}
defineExpose({
src/components/secondaryScreen/screen-right/oneR.vue
+20 -10
View File
@@ -1,5 +1,5 @@
<template>
<div class="terminal-container">
<div class="terminal-container self">
<public-title title="睡眠" />
<div class="inner">
<div class="title">
@@ -21,12 +21,16 @@
type: String,
});
const sleepChart = ref<HTMLElement>();
onMounted(() => {
init();
});
watch(props, () => {
init();
});
// onMounted(() => {
// init();
// });
watch(
props,
() => {
init();
},
{ immediate: true }
);
const nums = ref({
avgShort: '',
avgLong: '',
@@ -68,13 +72,19 @@
}
</script>
<style scoped lang="less">
.terminal-container.self {
position: relative;
padding-bottom: 0 !important;
}
.inner {
height: calc(100% - 40px);
height: calc(100% - 20px);
.title {
color: #cfcfcf;
text-align: left;
padding: 1% 6%;
height: 30px;
line-height: 30px;
.count {
font-size: 28px;
@@ -82,7 +92,7 @@
}
.lightSleep {
padding-left: 2%;
padding: 3px 0 3px 2%;
}
}
src/components/secondaryScreen/screen-right/screenRightHooks.ts
+44 -13
View File
@@ -1,4 +1,4 @@
import { computed, ref } from 'vue';
import { ref } from 'vue';
import dayjs from 'dayjs';
import { minuteToStr } from '/@/utils/utils.ts';
@@ -6,7 +6,7 @@ function timeFormat(type, list) {
const o = {
week: 'MM-DD',
month: 'MM-DD',
year: 'MM',
year: 'YYYY-MM',
};
if (list) {
return list.map((item) => dayjs(item).format(o[type]));
@@ -24,28 +24,51 @@ export function formatStr({ list, len }) {
return minuteToStr(sum);
}
function createWeek() {
let arr = [];
for (let i = 0; i < 7; i++) {}
}
const defaultVal = (type) => {
if (type == 'week') {
return {
defaultTime: [],
};
}
if (type == 'month') {
}
if (type == 'year') {
}
};
export function sleepCharts({ time, short, long, awake, type }) {
let middleIndex = Math.floor(time.length / 2);
return {
grid: {
top: '15%',
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true,
left: '5%',
right: '5%',
bottom: 30,
},
tooltip: {
show: true,
trigger: 'axis',
textStyle: {
align: 'left', // 使用左对齐样式显示tooltip文本
color: '#fff',
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#1b7ef2',
},
legend: {
data: ['清醒', '浅睡', '深睡'],
textStyle: {
color: '#ffffff',
},
top: 0,
icon: 'roundRect',
height: 40,
itemHeight: 14,
top: -5,
left: '55%',
},
color: ['#14B3F8', '#6D7BEB', '#5451DC'],
@@ -57,8 +80,13 @@ export function sleepCharts({ time, short, long, awake, type }) {
axisLabel: {
color: '#ffffff',
formatter: (item, i) => {
if (i == 0 || i == time.length - 1 || i == Math.floor(time.length / 2)) return item;
let mid = time.length == 30 ? 16 : middleIndex;
if (i == 0 || i == mid || i == time.length - 1) {
return item;
}
},
showMinLabel: true,
showMaxLabel: true,
},
data: timeFormat(type, time),
},
@@ -99,34 +127,35 @@ export function sleepCharts({ time, short, long, awake, type }) {
//步数
export function useStep() {
const total = ref();
const stepData = ref([
{
name: '5000以下',
value: '23',
value: '0',
type: 'lessThanFiveThousand',
type_dictText: '恶性肿瘤',
},
{
name: '5000~1w',
value: '2',
value: '0',
type: 'fiveThousandToTenThousand',
type_dictText: '其他',
},
{
name: '1~1.5w',
value: '34',
value: '0',
type: 'TenThousandToFifteenThousand',
type_dictText: '其他',
},
{
name: '1.5w~2w',
value: '43',
value: '0',
type: 'FifteenToTwentyThousand',
type_dictText: '其他',
},
{
name: '2以上',
value: '43',
value: '0',
type: 'TwentyThousandOrMore',
type_dictText: '其他',
},
@@ -136,9 +165,11 @@ export function useStep() {
stepData.value.map((item) => {
item.value = data[item.type] || 0;
});
total.value = data?.userCount;
}
return {
total,
stepData,
setStep,
};
src/components/secondaryScreen/screen-right/threeR.vue
+22 -7
View File
@@ -38,15 +38,18 @@
total: 0,
onChange: pageChange,
});
const timer = ref(null);
const pages = ref(0); //总页数
function handlePoliceDetail(record) {
$bus.emit(earlyWarning, record);
}
onMounted(() => {
init();
init(1);
setHeight();
window.addEventListener('resize', setHeight);
interval();
});
onUnmounted(() => {
window.removeEventListener('resize', setHeight);
@@ -56,20 +59,33 @@
tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
}
async function init() {
async function init(page) {
const { pageSize, current } = pagination.value;
const { code, result } = await getMonitorList({ pageSize, pageNo: current });
const { code, result } = await getMonitorList({ pageSize, pageNo: page });
if (code == 200) {
dataSource.value = [...result.records, ...result.records.map((item, i) => ({ ...item, id: item.id + i }))];
pagination.value.total = result.total * 2;
dataSource.value = result.records;
pagination.value.total = result.total;
pages.value = result.pages;
pagination.value.current = page;
}
}
function pageChange(page, pageS) {
pagination.value.current = page;
pagination.value.pageSize = pageS;
init();
init(page);
}
function interval() {
timer.value = setInterval(() => {
let page = pagination.value.current < pages.value ? pagination.value.current + 1 : 1;
init(page);
}, 10000);
}
onUnmounted(() => {
clearInterval(timer.value);
});
</script>
<style lang="less" scoped>
.inner-screen {
@@ -100,7 +116,6 @@
:deep(.ant-table) {
background-color: transparent;
//pointer-events: none;
}
:deep(.ant-table-tbody > tr > td) {
src/components/secondaryScreen/screen-right/twoR.vue
+36 -2
View File
@@ -1,7 +1,11 @@
<template>
<div>
<div class="pie-container self">
<public-title title="步数" />
<div class="inner" ref="healthChart"></div>
<div class="count">
<div class="t">总人数</div>
<div class="v">{{ total }}</div>
</div>
</div>
</template>
<script setup lang="ts">
@@ -24,7 +28,7 @@
onMounted(() => {
init();
});
const { stepData, getValue, setStep } = useStep();
const { stepData, total, setStep } = useStep();
async function init() {
try {
@@ -59,4 +63,34 @@
margin: 0 auto;
height: calc(100% - 40px);
}
.pie-container.self {
position: relative;
padding-bottom: 0 !important;
}
.count {
position: absolute;
width: 80%;
top: 51%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
font-size: 22px;
font-weight: bold;
z-index: 1;
pointer-events: none;
> div {
width: 80px;
z-index: 0;
}
.t {
font-size: 14px;
font-weight: normal;
}
}
</style>
src/components/secondaryScreen/secondMap/components/footerDialog.vue
+23 -12
View File
@@ -2,29 +2,39 @@
<div class="modal-content">
<div class="empty-png"></div>
<div class="modal-header">
<button type="button" aria-label="Close" class="modal-close">X</button>
<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><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 v-for="item in detailLeft" :key="item.key"
><span class="info-label">{{ item.name }}：</span><span class="info-value">{{ item.value }}</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 v-for="item in detailRight" :key="item.key"
><span class="info-label">{{ item.name }}：</span><span class="info-value">{{ item.value }}</span></div
>
</div>
</div>
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
const emits = defineEmits(['closeDialog']);
const props = defineProps({
detailRight: Array,
detailLeft: Array,
});
function closeDialog() {
emits('closeDialog');
}
</script>
<style scoped lang="less">
.modal-content {
position: relative;
//background-clip: padding-box;
border: 0;
border-radius: 2px;
@@ -36,9 +46,10 @@
}
.modal-close {
width: 40px;
height: 40px;
position: absolute;
top: 10px;
right: 6px;
right: 0;
z-index: 10;
padding: 0;
color: #999999;
@@ -58,7 +69,6 @@
.modal-title {
margin: 0;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
font-size: 16px;
line-height: 22px;
@@ -83,6 +93,7 @@
color: #ffffff;
background-color: #00152b;
border: 1px solid #129bff;
border-top: none;
padding: 2% 0 2% 5%;
display: flex;
src/components/secondaryScreen/secondMap/components/watchListDialog.vue
+19 -134
View File
@@ -18,10 +18,13 @@
<script setup lang="ts">
import Dialog from '/@/components/dialog/Dialog.vue';
import { ref } from 'vue';
import { columns } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
import { getUserListByDeptId } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
//分页相关
const current = ref(1);
const pageSize = ref(10);
const total = ref(0);
const deptId = ref();
const paginationProp = ref({
showSizeChanger: true,
pageSizeOptions: ['10', '30', '50'],
@@ -35,150 +38,32 @@
function pageChange(page, pageS) {
current.value = page;
pageSize.value = pageS;
getRecords(deptId.value);
}
const dataSource = ref([
{
key: '1',
name: '胡彦斌1',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖2',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '3',
name: '胡彦祖3',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '4',
name: '胡彦祖4',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '5',
name: '胡彦祖5',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '6',
name: '胡彦祖6',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '7',
name: '胡彦祖7',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '8',
name: '胡彦祖8',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '9',
name: '胡彦祖9',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '10',
name: '胡彦祖10',
age: 42,
address: '西湖区湖底公园1号',
},
]);
const columns = ref([
{
title: '员工名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '单位名称',
dataIndex: 'age',
align: 'center',
key: 'age',
},
{
title: '部门名称',
dataIndex: 'address',
align: 'center',
key: 'address',
},
{
title: '工具编码',
dataIndex: 'address1',
align: 'center',
key: 'address1',
},
{
title: '心率（次/分）',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '血氧（%）',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '压力',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '睡眠',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '体温（℃）',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '锻炼（千卡）',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '步数（米）',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
]);
const dataSource = ref([]);
const visible = ref(false);
function openModal() {
console.log('1');
function openModal(id: string) {
visible.value = true;
deptId.value = id;
getRecords(id);
}
function closeModal() {
visible.value = false;
}
async function getRecords(id: string) {
if (!id) {
return;
}
const { code, result } = await getUserListByDeptId({ orgId: id, pageSize: pageSize.value, pageNo: current.value });
if (code == 200) {
dataSource.value = result?.records;
}
}
defineExpose({
openModal,
closeModal,
@@ -211,7 +96,7 @@
:deep(.ant-table-tbody > tr > td) {
border-bottom: none;
padding: 0px 4px;
padding: 0 4px;
}
:deep(.ant-table-row:hover) {
src/components/secondaryScreen/secondMap/secondMap.vue
+40 -70
View File
@@ -2,7 +2,6 @@
<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; height: 100%">
@@ -24,62 +23,32 @@
</div>
<div
class="footer-dialog-con"
style="--moveUp: 110px; --moveDown: -50px"
:class="show ? 'slide-top' : 'slide-bottom'"
style="--moveUp: 120px; --moveDown: -120px"
:class="isShowAlarm ? 'slide-top' : 'slide-bottom'"
v-show="isShowAlarm"
>
<FooterDialog></FooterDialog>
<FooterDialog :detailLeft="detailLeft" :detailRight="detailRight" @closeDialog="closeDialog"></FooterDialog>
</div>
</div>
<WatchListDialog ref="watchDialogRef"></WatchListDialog>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { onMounted, ref } from 'vue';
import { Map } from '/@/assets/mapUtils/map';
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 { useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
import { 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 show = ref(false);
function test() {
show.value = !show.value;
}
const props = defineProps({
orgCode: String,
type: String,
});
const markerList = [
{
lon: 109.42,
lat: 33.9,
type: '6',
name: '第一采油厂',
count: 20,
},
{
lon: 106.59,
lat: 34.93,
type: '6',
name: '第二采油厂',
count: 40,
},
{
lon: 109.42,
lat: 31.9,
type: '6',
name: '第三采油厂',
count: 60,
},
];
const mapList = ref([]); //地图数据
// 底部表格
const { isShow, className, setIsShow } = useMoveClass();
@@ -91,18 +60,13 @@
const watchDialogRef = ref();
function openWatchList(item) {
console.log('item', item);
if (item.key == 'allotDeviceNum') {
watchDialogRef.value.openModal();
watchDialogRef.value.openModal(item.extData?.deptId);
}
}
const { footerList, setFooterList, setIsShowAlarm, isShowAlarm } = useFooterTable();
watch(
() => props.orgCode,
() => {
setIsShow(false);
}
);
async function getFooterTable(orgCode) {
const params = {
@@ -111,51 +75,57 @@
};
const { code, result } = await footerApi(params);
if (code == 200) {
setFooterList(result.records[0]);
setFooterList(result);
}
}
const mapList = ref([]);
async function getMapList() {
const { code, result } = await mapListApi();
if (code == 200 && result.length > 0) {
const newArr = result.map((item) => ({ ...item, type: '6' }));
mapList.value = newArr;
Map.createOverlay(
newArr,
{
content: function (val) {
return `<div style="color: red;
try {
const { code, result } = await mapListApi({});
if (code == 200 && result.length > 0) {
const newArr = result.map((item) => ({ ...item, type: '6' }));
mapList.value = newArr;
Map.createOverlay(
newArr,
{
content: (val) => {
return `<div style="
width: 21px;
height: 44px;
position: absolute;
left: -20px;
top: -20px;" title="${val.departName}">
top: -20px;" title="${val?.departName}">
</div>`;
},
},
},
(val) => {
console.log('val', val);
getFooterTable(val.orgCode);
setIsShow(true);
}
);
}
(val) => {
getFooterTable(val.orgCode);
setIsShow(true);
}
);
}
} catch {}
}
const { detailLeft, detailRight, setDetail } = useAlarmDetail();
onMounted(() => {
init();
//点击预警定位
$bus.on(earlyWarning, (params) => {
console.log('params', params);
setDetail(params);
drawMarker(params);
isShow.value ? setIsShow(true) : setIsShow(false);
isShowAlarm.value ? setIsShowAlarm(true) : setIsShowAlarm(false);
setIsShowAlarm(true);
});
});
function drawMarker(data) {
/**
*@desc 预警弹窗关闭
*/
function closeDialog() {
setIsShowAlarm(!isShowAlarm.value);
}
function drawMarker(data: any) {
const { lon, lat } = data;
if (!lon || !lat) return;
Map.createMarker(data);
src/components/secondaryScreen/secondMap/secondMapApi.ts
+7 -1
View File
@@ -1,9 +1,15 @@
import { get } from '/@/api/request.ts';
export enum Api {
footerStatistic = '/health-watch/watch/deptStatisticData/list',
footerStatistic = '/health-watch/watch/deptStatisticData/listByorgCode',
mapListApi = '/health-watch/watch/watchDevice/getMapList',
getUserListByDeptId = '/health-watch/watch/watchDevice/getUserListByDeptId',
}
/**
* 底部单行表格
* @param params
*/
export const footerApi = (params) => get(Api.footerStatistic, params);
export const mapListApi = (params) => get(Api.mapListApi, params);
export const getUserListByDeptId = (params) => get(Api.getUserListByDeptId, params);
src/components/secondaryScreen/secondMap/secondMapHooks.ts
+179 -59
View File
@@ -1,40 +1,26 @@
// export const tabList = [
// {
// name: '所有资源',
// type: TabType.all,
// },
// {
// name: '油田医院',
// type: TabType.youTianYiYuan,
// },
// {
// name: '医疗点',
// type: TabType.yiLiaoDian,
// },
// ];
import {cloneDeep} from 'lodash-es';
import {nextTick, onMounted, ref} from "vue";
import {allSecondaryDeparts} from "/@/components/secondaryScreen/commonApi";
import { cloneDeep } from 'lodash-es';
import { onMounted, ref } from 'vue';
import { allSecondaryDeparts } from '/@/components/secondaryScreen/commonApi';
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',}
const fieldNames = { label: 'departName', value: 'orgCode' };
onMounted(() => {
getOptionData();
});
function setOption(data) {
option.value = data;
orgCode.value = data[0]?.orgCode
orgCode.value = data[0]?.orgCode;
}
async function getOptionData() {
const {result, code} = await allSecondaryDeparts();
const { result, code } = await allSecondaryDeparts();
if (code == 200) {
setOption(result)
setOption(result);
}
}
@@ -42,112 +28,177 @@ export function useDepart() {
orgCode,
option,
setOption,
fieldNames
fieldNames,
};
}
export function useTimeType(t) {
const type = ref(t || '')
const type = ref(t || '');
const timeRangeOption = [
{
label: '近一周',
value: 'week'
value: 'week',
},
{
label: '近一月',
value: 'month'
value: 'month',
},
{
label: '近一年',
value: 'year'
}
]
value: 'year',
},
];
return {
type,
timeRangeOption
}
timeRangeOption,
};
}
export function useFooterTable() {
const isShowAlarm = ref(false)
const isShowAlarm = ref(false);
function setIsShowAlarm(type: boolean) {
isShowAlarm.value = type
isShowAlarm.value = type;
}
const footerList = ref([
{
name: '单位名称',
value: '',
key: 'orgName'
key: 'orgName',
extData: {},
},
{
name: '单位人数',
value: '',
key: 'userCount'
key: 'userCount',
extData: {},
},
{
name: '入库设备数量',
value: '',
key: 'deviceNum'
key: 'deviceNum',
extData: {},
},
{
name: '佩戴手表人数',
value: '',
key: 'allotDeviceNum',
extData: {},
},
{
name: '近一周活跃人数',
value: '',
key: 'sevenDayNum'
key: 'sevenDayNum',
extData: {},
},
{
name: '近一月活跃人数',
value: '',
key: 'a'
key: 'thirtyDayNum',
extData: {},
},
{
name: '近一年活跃人数',
value: '',
key: 'b'
}
])
key: 'yearDayNum',
extData: {},
},
]);
function setFooterList(res: any) {
const arrList = cloneDeep(footerList.value)
const arrList = cloneDeep(footerList.value);
if (res) {
arrList.forEach(item => {
item.value = res[item.key] || ''
})
console.log('resssss', res);
arrList.forEach((item) => {
item.value = res[item.key];
item.extData = res;
});
}
footerList.value = arrList
footerList.value = arrList;
}
return {
footerList,
setFooterList,
setIsShowAlarm,
isShowAlarm
isShowAlarm,
};
}
export function useAlarmDetail() {
const detailLeft = ref([
{
name: '员工姓名',
value: '',
key: 'realName',
},
{
name: '工具编码',
value: '',
key: 'watchNo',
},
{
name: '单位名称',
value: '',
key: 'orgName2',
},
]);
const detailRight = ref([
{
name: '部门名称',
value: '',
key: 'orgName',
},
{
name: '事件类型',
value: '',
key: 'eventType_dictText',
},
{
name: '异常数据',
value: '',
key: 'dataValue',
},
{
name: '报警时间',
value: '',
key: 'warnTime',
},
]);
function setDetail(res) {
if (res) {
detailLeft.value.forEach((item) => {
item.value = res[item.key];
});
detailRight.value.forEach((item) => {
item.value = res[item.key];
});
}
}
return {
detailLeft,
detailRight,
setDetail,
};
}
export function useMoveClass() {
const isShow = ref(false)
const className = ref('slide-bottom')
const isShow = ref(false);
const className = ref('slide-bottom');
function setIsShow(type: boolean) {
isShow.value = type
className.value = type ? 'slide-top' : 'slide-bottom'
isShow.value = type;
className.value = type ? 'slide-top' : 'slide-bottom';
}
return {
isShow,
className,
setIsShow
}
setIsShow,
};
}
export function useTree() {
@@ -172,10 +223,79 @@ export function useTree() {
},
],
},
]
const orgCode = ref([])
];
const orgCode = ref([]);
return {
orgCode,
treeOption
}
treeOption,
};
}
export const columns = [
{
title: '员工名称',
dataIndex: 'realName',
align: 'center',
key: 'realName',
},
{
title: '单位名称',
dataIndex: 'orgName',
align: 'center',
key: 'orgName',
},
{
title: '部门名称',
dataIndex: 'orgName1',
align: 'center',
key: 'orgName1',
},
{
title: '工具编码',
dataIndex: 'watchNo',
align: 'center',
key: 'watchNo',
},
{
title: '心率（次/分）',
dataIndex: 'heartRate',
align: 'center',
key: 'heartRate',
},
{
title: '血氧（%）',
dataIndex: 'spo2',
align: 'center',
key: 'spo2',
},
{
title: '压力',
dataIndex: 'stress',
align: 'center',
key: 'stress',
},
{
title: '睡眠',
dataIndex: 'sleep',
align: 'center',
key: 'sleep',
},
{
title: '体温（℃）',
dataIndex: 'temp',
align: 'center',
key: 'temp',
},
{
title: '锻炼（千卡）',
dataIndex: 'exercise',
align: 'center',
key: 'exercise',
},
{
title: '步数（米）',
dataIndex: 'workout',
align: 'center',
key: 'workout',
},
];
src/utils/env.ts
+3 -1
View File
@@ -1,7 +1,9 @@
export function getAppEnvConfig() {
const ENV = import.meta.env;
const { VITE_GLOB_API_URL } = ENV;
const { VITE_GLOB_API_URL, VITE_GLOB_API_YIN_JI, VITE_GLOB_API_JIAN_CE } = ENV;
return {
VITE_GLOB_API_URL,
VITE_GLOB_API_YIN_JI,
VITE_GLOB_API_JIAN_CE,
};
}
src/utils/socket.ts
+6 -3
View File
@@ -1,10 +1,13 @@
import { onMounted, onUnmounted, ref } from 'vue';
import { getAppEnvConfig } from '/@/utils/env.ts';
const { VITE_GLOB_API_YIN_JI, VITE_GLOB_API_JIAN_CE } = getAppEnvConfig();
//健康监测工具报警
export const basicPath = 'ws://192.168.1.16:7098/websocket/watchMonitor';
export const basicPath = VITE_GLOB_API_YIN_JI;
//应急求助
export const emergencyPath = 'ws://192.168.1.16:7011/websocket/emergency';
export const emergencyPath = VITE_GLOB_API_JIAN_CE;
const token =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAyNjA0MDI3fQ.MYf9yUnXO0RTFL4u96pN1Z2mBwtXU5W-QlxDgoAsoOw';
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAzMjExNzQ1fQ.dadvKgAgzfK6DUd8xtrgadxPbPXUsayNNSrt3mNxKC8';
export function useSocket(path = basicPath) {
const socket = ref();
src/views/indexSon.vue
+7 -4
View File
@@ -25,6 +25,7 @@
class="type-select"
:options="option"
:field-names="fieldNames"
@change="orgChange"
></a-select>
<!-- <a-cascader v-model:value="treeValue" :options="treeOption" placeholder="选择单位" :open="true" :changeOnSelect="true" />-->
<a-select placeholder="选择时间范围" v-model:value="type" class="type-select" :options="timeRangeOption"></a-select>
@@ -72,11 +73,13 @@
router.go(-1);
}
const { orgCode: treeValue, treeOption } = useTree();
watch(treeValue, (n) => {
console.log('n', n);
});
const { orgCode, option, fieldNames } = useDepart({});
function orgChange(val, option) {
console.log('val', val);
console.log('option', option);
}
const { type, timeRangeOption } = useTimeType('week');
</script>
<style lang="less" scoped>