update: 新疆大屏
This commit is contained in:
xf
@@ -63,12 +63,14 @@
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { tabList, legendList } from '/@/views/indexSun/indexSun.ts';
|
||||
import { tabList, legendList, infoContent } from '/@/views/indexSun/indexSun.ts';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { innerLineLight, outerLineOption } from '/@/assets/mapUtils/mapConstant.ts';
|
||||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||||
import { aircraft, getKmStr, getTimeStr, mapApiSwitch, TabType } from '/@/components/xianMap/xianMapHooks.ts';
|
||||
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
||||
import $bus from '/@/utils/bus.ts';
|
||||
import { earlyWarning } from '/@/utils/busConstant.ts';
|
||||
|
||||
const list = ref(tabList);
|
||||
const currentIndex = ref(0);
|
||||
@@ -104,6 +106,19 @@
|
||||
Map.map && Map.map.on('zoomend', setLevel);
|
||||
Map.map && Map.map.on('zoomend', setLevel);
|
||||
});
|
||||
$bus.on(earlyWarning, (params) => {
|
||||
console.log(params, 12323);
|
||||
drawMarker(params);
|
||||
});
|
||||
document.addEventListener('click', (e) => {
|
||||
let t = e.target.closest('.viewBtn');
|
||||
if (t) {
|
||||
console.log(t.id);
|
||||
if (t.id) {
|
||||
handleClcikDetail(JSON.parse(t.id));
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
function setLevel() {
|
||||
//获取当前地图级别
|
||||
@@ -182,8 +197,9 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
async function getMapData(type, params = {}) {
|
||||
async function getMapData(type, params = { type: '' }) {
|
||||
try {
|
||||
console.log(type, params, 'asghujis');
|
||||
const { code, result } = await mapApiSwitch(type, params);
|
||||
if (code == 200) {
|
||||
if (Array.isArray(result) && result.length > 0) {
|
||||
@@ -200,7 +216,14 @@
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
() => {},
|
||||
async (val) => {
|
||||
console.log(val);
|
||||
Map.createInfoModal({ option: val, content: infoContent(val) });
|
||||
// const viewBtn = document.getElementById(val.id);
|
||||
// viewBtn.onclick = () => {
|
||||
// handleClcikDetail(val);
|
||||
// };
|
||||
},
|
||||
true
|
||||
);
|
||||
} else {
|
||||
@@ -218,6 +241,9 @@
|
||||
showDrivingPanel.value = false;
|
||||
emits('clearHospitalList');
|
||||
}
|
||||
function handleClcikDetail(res) {
|
||||
console.log(res);
|
||||
}
|
||||
function setTitle({ time, distance }) {
|
||||
let str = '全程';
|
||||
str += getTimeStr(time);
|
||||
@@ -238,6 +264,15 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
function drawMarker(data: any) {
|
||||
console.log(data);
|
||||
const { lon, lat } = data;
|
||||
if (!lon || !lat) {
|
||||
Map.clearMarker();
|
||||
return;
|
||||
}
|
||||
Map.createMarker({ ...data, realName: data.userName });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -483,5 +518,36 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.modal-box) {
|
||||
width: 330px;
|
||||
height: 220px;
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.modal-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.item-one {
|
||||
width: 50%;
|
||||
}
|
||||
.item-two {
|
||||
color: #00ccff;
|
||||
}
|
||||
}
|
||||
.modal-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.view-btn {
|
||||
padding: 5px;
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
color: #00ccff;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #00ccff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<Dialog class="index-modal" :openVis="visible" width="60%" :title="dialogTitle" @close="closeDialog" :maskClosable="false">
|
||||
<template #container>
|
||||
<div v-if="useForm" class="form-container">
|
||||
<Form :model="formRecord" :label-width="100" v-bind="formItemLayout">
|
||||
<slot name="searchFirst"></slot>
|
||||
<a-form-item v-for="(item, index) in firstForm" :label="item.label" :key="index">
|
||||
<a-input :placeholder="item.placeholder" v-if="item.type == 'input'" v-model:value="formRecord[item.field]" />
|
||||
</a-form-item>
|
||||
<a-form-item label="单位">
|
||||
<a-select placeholder="选择单位" v-model:value="orgCode" :options="option" :field-names="fieldNames" />
|
||||
</a-form-item>
|
||||
<a-form-item label="部门">
|
||||
<a-select placeholder="选择单位" @focus="changeDept" v-model:value="orgCode" :options="option" :field-names="fieldNames" />
|
||||
</a-form-item>
|
||||
<slot name="searchSecond"></slot>
|
||||
<a-form-item label="性别">
|
||||
<a-select v-model:value="formRecord.sex" placeholder="请选择" :options="sexTypeList" />
|
||||
</a-form-item>
|
||||
</Form>
|
||||
<div class="form-btn">
|
||||
<a-button @click="handleClicksearch">搜索</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<BasicTable ref="registerTable" class="table-container" :key="visible" :columns="column" :apiParams="formState" />
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { useDialog } from '/@/views/components/dialogHooks.ts';
|
||||
import { ref, watch } from 'vue';
|
||||
import { SexType, sexTypeList } 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';
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
useForm: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
column: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
firstForm: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
const formState = ref();
|
||||
const dialogTitle = ref('');
|
||||
const formRecord = ref({
|
||||
sex: SexType.all,
|
||||
});
|
||||
function changeDept() {
|
||||
if (!orgCode.value) {
|
||||
return message.warning('请先选择单位');
|
||||
}
|
||||
}
|
||||
const formItemLayout = {
|
||||
labelCol: {
|
||||
style: { width: '60px' },
|
||||
...props.labelCol,
|
||||
},
|
||||
wrapperCol: {
|
||||
span: 24,
|
||||
...props.wrapperCol,
|
||||
},
|
||||
};
|
||||
watch(props, () => {
|
||||
dialogTitle.value = props.title;
|
||||
getField();
|
||||
});
|
||||
|
||||
function getField() {
|
||||
let result = {};
|
||||
props.firstForm.map((item) => {
|
||||
result[item.field] = '';
|
||||
});
|
||||
formRecord.value = {
|
||||
...formRecord.value,
|
||||
...result,
|
||||
};
|
||||
console.log(formRecord.value);
|
||||
}
|
||||
function handleClicksearch() {
|
||||
console.log(formRecord.value);
|
||||
}
|
||||
|
||||
const { orgCode, option, fieldNames, setOrgCode } = useDepart();
|
||||
const { visible, closeDialog, openDialog } = useDialog({ title: dialogTitle.value });
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.dialog) {
|
||||
border: 1px solid #00ccff !important;
|
||||
}
|
||||
.index-modal {
|
||||
border: 1px solid #00ccff !important;
|
||||
:deep(.dialog .ant-modal-title) {
|
||||
background: red !important;
|
||||
}
|
||||
.form-container {
|
||||
margin: 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
:deep(.ant-form-item-label > label) {
|
||||
color: var(--formLabel);
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
color: #fff !important;
|
||||
background-color: #082147 !important;
|
||||
border: 1px solid transparent !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
:deep(.ant-form) {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
.ant-form-item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.form-btn {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
:deep(.ant-btn) {
|
||||
background: #082147;
|
||||
border: 1px solid #00ccff;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
//margin: 0 15px;
|
||||
}
|
||||
}
|
||||
.table-container {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
import { post } from '/@/api/request.ts';
|
||||
|
||||
enum Api {
|
||||
statisticsNew = '/health-emergency/emergency/LargeScreenNew/statisticsNew',
|
||||
}
|
||||
|
||||
export const statisticsNewApi = (params) => post(Api.statisticsNew, params);
|
||||
@@ -1,10 +1,8 @@
|
||||
import * as echarts from 'echarts';
|
||||
import { legend1, legend2, legend3, legend4, legend5 } from '/@/components/xianMap/xianMapHooks.ts';
|
||||
export const legend1 = new URL('/@/assets/img/legend1.png', import.meta.url).href;
|
||||
export const legend2 = new URL('/@/assets/img/legend2.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 const legend4 = new URL('/@/assets/img/legend4.png', import.meta.url).href;
|
||||
export const legend5 = new URL('/@/assets/img/legend5.png', import.meta.url).href;
|
||||
export function getClassCharts(dx, dy) {
|
||||
return {
|
||||
grid: {
|
||||
@@ -118,9 +116,115 @@ export const tabList = [
|
||||
},
|
||||
];
|
||||
export const legendList = [
|
||||
{ img: legend2, text: '健康小屋', color: '#1BEFF6' },
|
||||
{ img: legend1, text: '油田医院', color: '#D86AF7' },
|
||||
{ img: legend2, text: '医疗点', color: '#39D78B' },
|
||||
{ img: legend3, text: '救护车', color: '#EE7E31' },
|
||||
{ img: legend4, text: '合作医院', color: '#3BAAFA' },
|
||||
{ img: legend5, text: '地方医院', color: '#1BEFF6' },
|
||||
];
|
||||
|
||||
export function infoContent(res) {
|
||||
return `
|
||||
<div class="modal-box">
|
||||
<div class="modal-item">
|
||||
<span class="item-one">单位：</span>
|
||||
<span class="item-two">${res.orgName ? res.orgName : '--'}</span>
|
||||
</div>
|
||||
<div class="modal-item">
|
||||
<span class="item-one">关爱人数：</span>
|
||||
<span class="item-two">${res.loveNum ? res.loveNum : '--'}</span>
|
||||
</div>
|
||||
<div class="modal-item">
|
||||
<span class="item-one">地点：</span>
|
||||
<span class="item-two">${res.name ? res.name : '--'}</span>
|
||||
</div>
|
||||
<div class="modal-btn">
|
||||
<div class="view-btn viewBtn" id='${JSON.stringify(res)}'>查看详情</div>
|
||||
</div>
|
||||
</div> `;
|
||||
}
|
||||
|
||||
const columns1 = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '单位',
|
||||
dataIndex: 'departName',
|
||||
key: 'departName',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
dataIndex: 'orgName',
|
||||
key: 'orgName',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'sex_dictText',
|
||||
key: 'sex_dictText',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'time',
|
||||
key: 'time',
|
||||
},
|
||||
{
|
||||
title: '电话',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
},
|
||||
];
|
||||
|
||||
const columns2 = [
|
||||
{
|
||||
title: '被救助人',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '单位',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '部门',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '救助方式',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '救助时间',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
{
|
||||
title: '联系电话',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
},
|
||||
];
|
||||
|
||||
const fromList = [
|
||||
{
|
||||
label: '姓名',
|
||||
field: 'realName',
|
||||
type: 'input',
|
||||
placeholder: '请输入姓名',
|
||||
},
|
||||
];
|
||||
|
||||
export const columns = [columns1, columns2];
|
||||
|
||||
export const fromLists = [fromList];
|
||||
|
||||
@@ -3,16 +3,16 @@
|
||||
<div class="title"> 服务详情数据 </div>
|
||||
<div class="content">
|
||||
<div class="type-time">
|
||||
<div @click="clickChooseType('0')" :class="[chooseType === '0' ? 'selected' : 'no-selected']">
|
||||
<div @click="clickChooseType('4')" :class="[chooseType === '4' ? 'selected' : 'no-selected']">
|
||||
本周
|
||||
<div>
|
||||
<div v-if="chooseType === '0'" class="triangle"></div>
|
||||
<div v-if="chooseType === '4'" class="triangle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="clickChooseType('1')" :class="[chooseType === '1' ? 'selected' : 'no-selected']">
|
||||
<div @click="clickChooseType('3')" :class="[chooseType === '3' ? 'selected' : 'no-selected']">
|
||||
本月
|
||||
<div>
|
||||
<div v-if="chooseType === '1'" class="triangle"></div>
|
||||
<div v-if="chooseType === '3'" class="triangle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="clickChooseType('2')" :class="[chooseType === '2' ? 'selected' : 'no-selected']">
|
||||
@@ -23,25 +23,79 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="server-container">
|
||||
<div v-for="(item, index) in statistics" class="server-item" :key="index">
|
||||
<div
|
||||
v-for="(item, index) in statistics"
|
||||
:class="[['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : '']"
|
||||
class="server-item"
|
||||
:key="index"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<span>{{ item?.name }}</span>
|
||||
<span>{{ item?.value }}123</span>
|
||||
<span>{{ item?.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { statisticsNewApi } from '/@/views/indexSun/indexSun.api.ts';
|
||||
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
|
||||
import { useDetailStore } from '/@/store/modules/detailData.ts';
|
||||
|
||||
const chooseType = ref('0');
|
||||
const { LEFT_KEY1 } = caching;
|
||||
const props = defineProps({
|
||||
centerId: {
|
||||
type: String,
|
||||
default: () => '',
|
||||
},
|
||||
});
|
||||
|
||||
const useDetail = useDetailStore();
|
||||
const emit = defineEmits(['handleClick']);
|
||||
const chooseType = ref('4');
|
||||
const { statistics, setStatistics, getStatistics } = useStatistics();
|
||||
const { setSession, getSession } = useSession();
|
||||
|
||||
watch(props, () => {
|
||||
getOneLeftInfo();
|
||||
});
|
||||
watch(
|
||||
() => chooseType.value,
|
||||
() => {
|
||||
getOneLeftInfo();
|
||||
}
|
||||
);
|
||||
async function getOneLeftInfo() {
|
||||
const params = {
|
||||
condition: chooseType.value,
|
||||
centerId: props.centerId,
|
||||
};
|
||||
statisticsNewApi(params).then((res) => {
|
||||
console.log(res);
|
||||
if (res.code != 200 || !res.result) {
|
||||
return;
|
||||
}
|
||||
setSession(LEFT_KEY1, JSON.stringify(res.result));
|
||||
setValue(res.result);
|
||||
});
|
||||
}
|
||||
function setValue(result) {
|
||||
let { alerdyreceive = '', totalacceptance = '' } = result;
|
||||
setStatistics(result);
|
||||
if (alerdyreceive || totalacceptance) {
|
||||
useDetail.setAlerdyreceive(alerdyreceive);
|
||||
useDetail.setTotalacceptance(totalacceptance);
|
||||
}
|
||||
}
|
||||
function clickChooseType(index) {
|
||||
if (chooseType.value === index) return;
|
||||
chooseType.value = index;
|
||||
}
|
||||
function handleClick(item) {
|
||||
emit('handleClick', item);
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.one-l-box {
|
||||
|
||||
+16
-17
@@ -1,18 +1,21 @@
|
||||
<template>
|
||||
<div class="three-l-box">
|
||||
<div class="one-r-box">
|
||||
<div class="title">
|
||||
<span>{{ props.title }}</span>
|
||||
<span class="look-view">查看详情</span>
|
||||
<span>健康终端报警</span>
|
||||
<span class="look-view" @click="handleView">查看详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item">
|
||||
<template v-if="scrollList.length > 0">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="5" v-bind="{ step: 0.2 }">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :copyNum="3" :limitScrollNum="5" v-bind="{ step: 0.2 }">
|
||||
<div class="item-d" v-for="(item, index) in scrollList" :key="index">
|
||||
<div>张二雷{{ index }}</div>
|
||||
<div>40岁</div>
|
||||
<div :style="{ color: props.type == 1 ? '#f24439' : '#f6ff00' }">体重(超重)</div>
|
||||
<div style="color: #f6ff00">压力异常(82)</div>
|
||||
<div>2025-10-26 22:29:58</div>
|
||||
<div class="item-d-img">
|
||||
<img :src="pointPng" alt="" />
|
||||
<img :src="addressPng" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</template>
|
||||
@@ -32,23 +35,19 @@
|
||||
import pointPng from '/@/assets/indexSun/point.png';
|
||||
import addressPng from '/@/assets/indexSun/address.png';
|
||||
const loading = ref(true);
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
});
|
||||
const scrollList = ref<any[]>([{}, {}, {}, {}, {}, {}, {}, {}]);
|
||||
|
||||
const emit = defineEmits(['handleView']);
|
||||
function handleView() {
|
||||
emit('handleView');
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.three-l-box {
|
||||
.one-r-box {
|
||||
background: rgba(8, 75, 100, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
letter-spacing: 0px;
|
||||
.title {
|
||||
height: 40px;
|
||||
border-radius: 14px 14px 0 0;
|
||||
|
||||
@@ -7,17 +7,17 @@
|
||||
<div class="content">
|
||||
<div class="content-item">
|
||||
<template v-if="scrollList.length > 0">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="5" v-bind="{ step: 0.2 }">
|
||||
<div class="item-d" v-for="(item, index) in scrollList" :key="index">
|
||||
<div>张二雷{{ index }}</div>
|
||||
<div style="color: #f6ff00">压力异常(82)</div>
|
||||
<div>2025-10-26 22:29:58</div>
|
||||
<div class="item-d-img">
|
||||
<img :src="pointPng" alt="" />
|
||||
<img :src="addressPng" alt="" />
|
||||
</div>
|
||||
<!-- <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="5" v-bind="{ step: 0.2 }">-->
|
||||
<div class="item-d" v-for="(item, index) in scrollList" :key="index">
|
||||
<div>张二雷{{ index }}</div>
|
||||
<div style="color: #f6ff00">压力异常(82)</div>
|
||||
<div>2025-10-26 22:29:58</div>
|
||||
<div class="item-d-img">
|
||||
<img :src="pointPng" alt="" />
|
||||
<img :src="addressPng" alt="" />
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
<!-- </vue3-seamless-scroll>-->
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
|
||||
@@ -65,8 +65,8 @@
|
||||
height: calc(100% - 40px);
|
||||
.content-item {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
letter-spacing: 1px;
|
||||
overflow: auto;
|
||||
.scroll {
|
||||
width: 98%;
|
||||
height: 100%;
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div class="three-new-l">
|
||||
<div class="title">
|
||||
<span>体检人数统计</span>
|
||||
<!-- <span class="look-view">查看详情</span>-->
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item">
|
||||
<template v-if="scrollList.length > 0">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :copyNum="3" :limitScrollNum="5" v-bind="{ step: 0.2 }">
|
||||
<div class="item-d" v-for="(item, index) in scrollList" :key="index">
|
||||
<div style="display: flex; align-items: center">
|
||||
<div style="margin-right: 10px">
|
||||
<img :src="hospitalPng" alt="" />
|
||||
</div>
|
||||
克拉玛依市中西医结合医院(市人民医院)
|
||||
</div>
|
||||
<div>23人</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
|
||||
<Empty :description="'暂无数据'" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
import { Empty } from 'ant-design-vue';
|
||||
import { ref } from 'vue';
|
||||
import hospitalPng from '/@/assets/indexSun/hospital.png';
|
||||
const scrollList = ref<any[]>([{}, {}, {}, {}, {}, {}, {}, {}]);
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.three-new-l {
|
||||
background: rgba(8, 75, 100, 0.2);
|
||||
.title {
|
||||
height: 40px;
|
||||
border-radius: 14px 14px 0 0;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
color: #ffffff;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
.look-view {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 10px 20px;
|
||||
height: calc(100% - 40px);
|
||||
.content-item {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.item-d {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
.item-d-img {
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div class="three-r-box">
|
||||
<div class="title">
|
||||
<span>体检数据</span>
|
||||
<!-- <span class="look-view">查看详情</span>-->
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item">
|
||||
<template v-if="scrollList.length > 0">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :copyNum="3" :limitScrollNum="4" v-bind="{ step: 0.2 }">
|
||||
<div class="item-d" v-for="(item, index) in scrollList" :key="index">
|
||||
<div>体检总人数</div>
|
||||
<div style="font-weight: bold">18000人</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div style="height: 100%; width: 100%; display: flex; align-items: center; justify-content: center">
|
||||
<Empty :description="'暂无数据'" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
const scrollList = ref<any[]>([{}, {}, {}, {}, {}, {}, {}, {}]);
|
||||
import { Empty } from 'ant-design-vue';
|
||||
import { ref } from 'vue';
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.three-r-box {
|
||||
background: rgba(8, 75, 100, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
height: 40px;
|
||||
border-radius: 14px 14px 0 0;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
color: #ffffff;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
.look-view {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 10px 20px;
|
||||
height: calc(100% - 40px);
|
||||
.content-item {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.item-d {
|
||||
//background: pink;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="two-l-box">
|
||||
<div class="title">
|
||||
<span>主诉分类</span>
|
||||
<span class="look-view">查看详情</span>
|
||||
<span class="look-view" @click="handleView">查看详情</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-search">
|
||||
@@ -63,6 +63,13 @@
|
||||
const dy = [46, 39, 18];
|
||||
let option = getClassCharts(dx, dy);
|
||||
myChart.value.setOption(option);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.value.resize();
|
||||
});
|
||||
}
|
||||
const emit = defineEmits(['handleView']);
|
||||
function handleView() {
|
||||
emit('handleView');
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<div class="two-r-box">
|
||||
<div class="title">
|
||||
<span>健康打卡数据</span>
|
||||
<!-- <span class="look-view">查看详情</span>-->
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content-item">
|
||||
<div class="content-item-info">
|
||||
<div class="content-item-name" style="font-size: 16px">
|
||||
<div class="content-item-img">
|
||||
<img :src="WeightPng" alt="" />
|
||||
</div>
|
||||
减重打卡
|
||||
</div>
|
||||
<div class="content-item-clock">
|
||||
<div>
|
||||
<span class="clock-text">今日打卡人数：</span>
|
||||
<span class="clock-num1">86人</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="clock-text">异常人数：</span>
|
||||
<span class="clock-num2">86人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item-clock" style="margin-bottom: 0">
|
||||
<div>
|
||||
<span class="clock-text">今日打卡人数：</span>
|
||||
<span class="clock-num1">86人</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="clock-text">异常人数：</span>
|
||||
<span class="clock-num2">86人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item">
|
||||
<div class="content-item-info">
|
||||
<div class="content-item-name" style="font-size: 16px">
|
||||
<div class="content-item-img">
|
||||
<img :src="WeightPng" alt="" />
|
||||
</div>
|
||||
减重打卡
|
||||
</div>
|
||||
<div class="content-item-clock">
|
||||
<div>
|
||||
<span class="clock-text">今日打卡人数：</span>
|
||||
<span class="clock-num1">86人</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="clock-text">异常人数：</span>
|
||||
<span class="clock-num2">86人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item-clock" style="margin-bottom: 0">
|
||||
<div>
|
||||
<span class="clock-text">今日打卡人数：</span>
|
||||
<span class="clock-num1">86人</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="clock-text">异常人数：</span>
|
||||
<span class="clock-num2">86人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item" style="margin-bottom: 0">
|
||||
<div class="content-item-info">
|
||||
<div class="content-item-name" style="font-size: 16px">
|
||||
<div class="content-item-img">
|
||||
<img :src="WeightPng" alt="" />
|
||||
</div>
|
||||
减重打卡
|
||||
</div>
|
||||
<div class="content-item-clock">
|
||||
<div>
|
||||
<span class="clock-text">今日打卡人数：</span>
|
||||
<span class="clock-num1">12386人</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="clock-text">异常人数：</span>
|
||||
<span class="clock-num2">86人</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-item-clock" style="margin-bottom: 0">
|
||||
<div>
|
||||
<span class="clock-text">今日打卡人数：</span>
|
||||
<span class="clock-num1">86人</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="clock-text">异常人数：</span>
|
||||
<span class="clock-num2">86人</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import WeightPng from '/@/assets/indexSun/weightClock.png';
|
||||
import FatPng from '/@/assets/indexSun/fatClock.png';
|
||||
import BloodPng from '/@/assets/indexSun/bloodClock.png';
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.two-r-box {
|
||||
background: rgba(8, 75, 100, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
letter-spacing: 0;
|
||||
.title {
|
||||
height: 40px;
|
||||
border-radius: 14px 14px 0 0;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
color: #ffffff;
|
||||
line-height: 40px;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
|
||||
.look-view {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 40px);
|
||||
padding: 10px 30px 10px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.content-item {
|
||||
flex: 1;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
.content-item-img {
|
||||
margin-right: 10px;
|
||||
img {
|
||||
width: 32px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
.content-item-info {
|
||||
flex: 1;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
font-size: 14px;
|
||||
.content-item-name,
|
||||
.content-item-clock {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.content-item-clock {
|
||||
padding-left: 42px;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
width: 49%;
|
||||
padding-bottom: 2px;
|
||||
margin-bottom: 5px;
|
||||
> span {
|
||||
border-bottom: 1px dashed #fff;
|
||||
}
|
||||
}
|
||||
.clock-text {
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
.clock-num1,
|
||||
.clock-num2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.clock-num1 {
|
||||
color: #22e8ff;
|
||||
}
|
||||
.clock-num2 {
|
||||
color: #f24439;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user