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

update

Browse Source 
1.添加庆阳大屏柱状图
This commit is contained in:
weixin
2025-04-21 10:24:47 +08:00
parent 8dc44b465b
commit 35c5625e1b
12 changed files with 346 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/chart-icon-active.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/assets/images/chart-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/assets/images/list-icon-active.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

src/assets/images/list-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

src/components/dialog/Dialog.vue
+34 -12
View File
@@ -1,16 +1,37 @@
<template>
<a-modal
:class="['dialog', themeType]"
v-model:visible="props.openVis"
:title="props.title"
:width="props.width"
:maskClosable="true"
@cancel="handleCancel"
destroy-on-close
>
<slot name="container"></slot>
<template #footer></template>
</a-modal>
<template v-if="props.title">
<a-modal
:class="['dialog', themeType]"
v-model:visible="props.openVis"
:title="props.title"
:width="props.width"
:maskClosable="true"
@cancel="handleCancel"
destroy-on-close
>
<template #title>
<slot name="modalTitle"></slot>
</template>
<slot name="container"></slot>
<template #footer></template>
</a-modal>
</template>
<template v-else>
<a-modal
:class="['dialog', themeType]"
v-model:visible="props.openVis"
:width="props.width"
:maskClosable="true"
@cancel="handleCancel"
destroy-on-close
>
<template #title>
<slot name="modalTitle"></slot>
</template>
<slot name="container"></slot>
<template #footer></template>
</a-modal>
</template>
</template>
<script setup lang="ts">
@@ -26,6 +47,7 @@
},
title: {
type: String,
default: () => '',
},
});
const { themeType } = useTheme();
src/views/centralScreen/centralScreen.api.ts
+12
View File
@@ -9,6 +9,8 @@ enum Api {
medicalCenterNew = '/health-emergency/emergency/LargeScreenNew/medicalCenterNew',
userHealthCenterNew = '/health-emergency/emergency/LargeScreenNew/userHealthCenterNew',
getAllList = '/health-emergency/emergency/LargeScreenNew/getAllListNew',
monitorTotal = '/health-watch/api/watch/screen/monitor/stats/total',
monitorMonth = '/health-watch/api/watch/screen/monitor/stats/month',
}
/**
@@ -58,3 +60,13 @@ export const getMonitorList = (params: any) => {
* @param params
*/
export const getMapListApi = (params: any) => post(Api.getAllList, params);
/**
* @description 获取健康终端日周月统计数据
* @param params
*/
export const monitorTotalApi = (params: any) => get(Api.monitorTotal, params);
/**
* @description 获取健康终端echart数据
* @param params
*/
export const monitorMonthApi = (params: any) => get(Api.monitorMonth, params);
src/views/centralScreen/centralScreenD.vue
+1
View File
@@ -62,6 +62,7 @@
<TerminalAlarmDialog
ref="terminalAlarmDialogRef"
:setting="setting"
title=""
:time-interval="{ startDate: dayjs().format('YYYY-MM-DD'), endDate: dayjs().format('YYYY-MM-DD') }"
/>
</div>
src/views/centralScreen/centralScreenYinChuan.vue
+1
View File
@@ -19,6 +19,7 @@
theme="dark"
:refreshState="refreshState"
:setting="setting"
:is-show="false"
class="service-details"
@handleClick="handlePhoneDialog"
/>
src/views/centralScreen/components/centralScreenDHook.ts
+67
View File
@@ -0,0 +1,67 @@
let dataX: any[] = [];
let dataY: any[] = [];
function setData(dX, dY) {
dataX = dX;
dataY = dY;
}
function getOption() {
return {
tooltip: {
trigger: 'axis',
formatter: (params: any) => {
console.log(params);
let p = params[0];
return `${p?.name}月: ${p?.value}次`;
},
},
xAxis: {
type: 'category',
data: dataX,
axisLine: {
lineStyle: {
color: '#0d2137',
},
},
axisTick: {
lineStyle: {
color: 'transparent', // X轴刻度线的颜色
},
},
axisLabel: {
color: '#ffffff', // X轴标签文字的颜色
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#ffffff',
},
},
splitLine: {
lineStyle: {
color: '#0d2137', // 设置Y轴分割线的颜色为红色
},
},
},
series: [
{
data: dataY,
type: 'bar',
barWidth: 10,
color: '#0a50a0',
splitLine: {
lineStyle: {
color: '#0d2137', // 设置Y轴分割线的颜色为红色
},
},
},
],
};
}
export function useE() {
return { setData, getOption };
}
src/views/centralScreen/components/serviceDetails.vue
+6
View File
@@ -49,6 +49,10 @@
theme: {
type: String,
},
isShow: {
type: Boolean,
default: () => true,
},
});
const emit = defineEmits(['handleClick']);
const typeTime = ref(timeTab);
@@ -99,6 +103,8 @@
}
function handleClick(item) {
// 下面这行是为了检查的时候，不让点击查看最新受理电话功能，只针对银川大屏
// if (!props.isShow && item.key === 'alerdyreceive') return;
emit('handleClick', item);
}
src/views/centralScreen/components/terminalAlarmDialog.vue
+220 -12
View File
@@ -1,26 +1,78 @@
<template>
<Dialog :openVis="visible" width="50%" title="健康终端报警列表" @close="closeDialog" :maskClosable="false">
<Dialog :openVis="visible" width="50%" :title="props.title" @close="closeDialog" :maskClosable="false">
<template #modalTitle>
<div class="modal-title-d">
健康终端报警列表
<div>
<div @click="changeChoose(0)" :class="[chooseType === 0 ? 'select-d' : 'no-select-d']">
<img :src="chooseType === 0 ? listSPng : listPng" alt="" /> 列表
</div>
<div @click="changeChoose(1)" :class="[chooseType === 1 ? 'select-d' : 'no-select-d']">
<img :src="chooseType === 1 ? chartSPng : chartPng" alt="" /> 图表
</div>
</div>
</div>
</template>
<template #container>
<BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
<template #address="{ record, column, index }">
<span v-if="record['address']">{{ record?.address }}</span>
<span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
</template>
</BasicTable>
<template v-if="chooseType === 0">
<BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
<template #address="{ record, column, index }">
<span v-if="record['address']">{{ record?.address }}</span>
<span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
</template>
</BasicTable>
</template>
<template v-else>
<div style="padding: 0 10px">
<div class="chart-top">
<div>
<div>{{ dayInfo?.dayCount || 0 }}次</div>
<div>日累计</div>
</div>
<div>
<div>{{ dayInfo?.weekCount || 0 }}次</div>
<div>周累计</div>
</div>
<div>
<div>{{ dayInfo?.monthCount || 0 }}次</div>
<div>月累计</div>
</div>
</div>
</div>
<div class="time-d">
<left-outlined @click="changeMonth(0)" class="left-or-right" />
<span style="user-select: none; margin: 0 10px">{{ dayjs(nowTime).format('YYYY年M月') }}</span>
<right-outlined @click="changeMonth(1)" class="left-or-right" />
</div>
<div ref="chartRef" style="height: 50vh"></div>
</template>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { computed, ref, watch, h } from 'vue';
import { computed, ref, watch, h, nextTick } from 'vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import Dialog from '/@/components/dialog/Dialog.vue';
import { useDialog } from '/@/views/components/dialogHooks.ts';
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
import { getMonitorList } from '/@/views/centralScreen/centralScreen.api.ts';
import { getMonitorList, monitorMonthApi, monitorTotalApi } from '/@/views/centralScreen/centralScreen.api.ts';
import { useUserStore } from '/@/store/modules/user.ts';
import listSPng from '/@/assets/images/list-icon-active.png';
import listPng from '/@/assets/images/list-icon.png';
import chartSPng from '/@/assets/images/chart-icon-active.png';
import chartPng from '/@/assets/images/chart-icon.png';
import * as echarts from 'echarts';
import { useE } from '/@/views/centralScreen/components/centralScreenDHook.ts';
import dayjs from 'dayjs';
const { setData, getOption } = useE();
const props = defineProps({
record: Object,
title: String,
title: {
type: String,
default: () => '健康终端报警列表',
},
useForm: Boolean,
labelCol: Object,
wrapperCol: Object,
@@ -32,6 +84,13 @@
},
});
const dayInfo = ref<any>({});
const dataX = ref<any[]>([]);
const dataY = ref<any[]>([]);
const chooseType = ref(0);
const nowTime = ref<any>(dayjs().format('YYYY-M'));
const columns = [
{
title: '姓名',
@@ -63,6 +122,11 @@
dataIndex: 'warnTime',
key: 'warnTime',
},
{
title: '上报时间',
dataIndex: 'createTime',
key: 'createTime',
},
{
title: '发生地点',
dataIndex: 'address',
@@ -78,13 +142,14 @@
},
];
const userStore = useUserStore();
const chartRef = ref();
console.log(props.timeInterval);
const formState = computed(() => ({
dataType: props.setting.dataType,
// orgCode: props.setting?.orgCode,
orgCodeList: userStore.getCenterInfo?.serviceScope,
}));
// const formState = ref({
// dataType: props.setting?.dataType,
// // orgCode: props.setting?.orgCode,
@@ -96,12 +161,155 @@
// watch(props, (v, o) => {
// registerTable.value?.getRecords();
// });
function changeChoose(type: any) {
if (type === chooseType.value) return;
chooseType.value = type;
if (chooseType.value === 1) {
nowTime.value = dayjs().format('YYYY-M');
// nextTick(() => {
// getEcharts();
// });
getDayAndMonthAndYear();
getEchart();
}
}
function getDayAndMonthAndYear() {
monitorTotalApi({ orgCodeList: userStore.getCenterInfo?.serviceScope })
.then((res: any) => {
if (res.code === 200) {
dayInfo.value = res?.result;
}
})
.catch((e) => {
console.log(e);
});
}
function getEchart() {
const y = dayjs(nowTime.value).format('YYYY');
const m = dayjs(nowTime.value).format('M');
monitorMonthApi({ orgCodeList: userStore.getCenterInfo?.serviceScope, year: y, month: m })
.then((res: any) => {
if (res.code === 200) {
let d1: any[] = [];
let d2: any[] = [];
res?.result &&
res?.result.map((item: any) => {
d1.push(item?.day);
d2.push(parseInt(item?.count || 0));
});
dataX.value = d1;
dataY.value = d2;
}
})
.catch((e) => {
console.log(e);
})
.finally(() => {
getEcharts();
});
}
function changeMonth(type: any) {
if (type === 0) {
nowTime.value = dayjs(nowTime.value).subtract(1, 'month');
} else {
if (dayjs().diff(nowTime.value, 'month') !== 0) {
nowTime.value = dayjs(nowTime.value).add(1, 'month');
} else {
return;
}
}
getEchart();
}
function getEcharts() {
const c = echarts.init(chartRef.value);
setData(dataX.value, dataY.value);
c.setOption(getOption());
window.addEventListener('resize', () => {
c.resize();
});
}
function openDialogBefore() {
chooseType.value = 0;
nowTime.value = dayjs().format('YYYY-M');
openDialog();
}
defineExpose({
openDialog,
openDialog: openDialogBefore,
});
</script>
<style scoped lang="less">
.table-container {
margin: 0 10px;
}
.modal-title-d {
width: calc(100% - 52px);
display: flex;
justify-content: space-between;
> div {
display: flex;
> div {
display: flex;
align-items: center;
cursor: pointer;
font-weight: normal;
font-size: 14px;
&:nth-child(1) {
margin-right: 30px;
}
}
}
img {
height: 80%;
margin-right: 8px;
}
.no-select-d {
color: #576371;
}
.select-d {
color: #ffffff;
}
}
.chart-top {
display: flex;
justify-content: space-around;
padding: 30px 0;
border-bottom: 1px solid #0d2238;
text-align: center;
> div {
> div {
&:nth-child(1) {
font-size: 32px;
font-weight: bold;
}
&:nth-child(2) {
font-size: 16px;
}
}
}
}
.time-d {
padding: 30px 0 0;
text-align: center;
font-size: 16px;
}
.left-or-right {
cursor: pointer;
}
</style>
src/views/components/employeeDialog.vue
+5
View File
@@ -22,6 +22,10 @@
</div>
<div class="con-item">
<span>发生时间：</span>
<span>{{ userInfo?.createDate }}</span>
</div>
<div class="con-item">
<span>上报时间：</span>
<span>{{ userInfo?.warnTime }}</span>
</div>
<div class="con-item">
@@ -46,6 +50,7 @@
watch(
() => props.record,
(nVal) => {
console.log('健康报警');
userInfo.value = nVal;
}
);