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

接口

Browse Source
This commit is contained in:
zhaotiantian
2023-12-01 18:21:40 +08:00
parent 9ab26f4915
commit 2319af2203
13 changed files with 931 additions and 867 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/extensions.json
Vendored
-3
View File
@@ -1,3 +0,0 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}
src/api/request.ts
+25
View File
@@ -0,0 +1,25 @@
import axios from "axios";
import requestURL from './url';
let token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAyMDA1MDQ4fQ.M1Xlecj3eUOgZUSofOlyBMoxJ5F01KH-tgJxaV2Femc\n'
const service = axios.create({
baseURL: requestURL,
timeout: 50000,
headers: {
// 设置后端需要的传参类型
'Content-Type': 'application/json;charset=UTF-8',
'X-Access-Token':token
}
})
export const get = (url, params) => {
return new Promise((resolve, reject) => {
service.get(url, {params: params}).then(res => {
if (res.data.code === 200) {
resolve(res.data);
} else {
reject(res.data);
}
}).catch(err => {
reject(err.data);
})
});
}
src/api/url.ts
+3
View File
@@ -0,0 +1,3 @@
const requestURL = "http://192.168.1.16";
export default requestURL
src/assets/less/index.less
+61 -60
View File
@@ -1,86 +1,87 @@
.type-time { .type-time {
padding-right: 4%; padding-right: 4%;
padding-top: 3%; padding-top: 3%;
font-size: 16px; font-size: 16px;
display: flex; display: flex;
justify-content: right; justify-content: right;
span { span {
padding: 0 2%; padding: 0 2%;
cursor: pointer; 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%;
} }
}
.unSelect { .select {
color: #A3A4A4; 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 { *::-webkit-scrollbar {
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
*::-webkit-scrollbar-button { *::-webkit-scrollbar-button {
width: 0; width: 0;
height: 0; height: 0;
display: none; display: none;
} }
*::-webkit-scrollbar-corner { *::-webkit-scrollbar-corner {
background-color: transparent; background-color: transparent;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0); border: 4px solid rgba(0, 0, 0, 0);
height: 6px; height: 6px;
border-radius: 25px; border-radius: 25px;
background-clip: padding-box; background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.30); background-color: rgba(0, 0, 0, 0.3);
} }
/* /*
antd表格样式 antd表格样式
*/ */
.ant-table-thead > tr > th{ .ant-table-thead > tr > th {
border-bottom: 1px solid #1e73c2!important; border-bottom: 1px solid #1e73c2 !important;
} }
.ant-table-body{ .ant-table-body {
background-color: #00152B; background-color: #00152b;
} }
.ant-modal-header{ .ant-modal-header {
border-bottom: none!important; border-bottom: none !important;
} }
.ant-table-tbody > tr > td{ .ant-table-tbody > tr > td {
border-bottom: 1px solid #1e73c2!important; border-bottom: 1px solid #1e73c2 !important;
background-color: #00152B; background-color: #00152b;
color: #ffffff; color: #ffffff;
} }
.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover, .ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-thead > tr > th{ .ant-table-tbody > tr > td.ant-table-cell-row-hover,
background-color: #00152B!important; .ant-table-thead > tr > th {
color: #ffffff!important; background-color: #00152b !important;
color: #ffffff !important;
} }
.ant-table-cell-scrollbar{ .ant-table-cell-scrollbar {
box-shadow: none!important; box-shadow: none !important;
} }
/* /*
表格滚动条 表格滚动条
*/ */
.ant-table-body::-webkit-scrollbar-thumb { .ant-table-body::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0); border: 4px solid rgba(0, 0, 0, 0);
height: 6px; height: 6px;
border-radius: 25px; border-radius: 25px;
background-clip: padding-box; background-clip: padding-box;
background-color: rgba(30, 115, 194, 0.3); background-color: rgba(30, 115, 194, 0.3);
} }
src/components/body-d-left/left.api.ts
+5
View File
@@ -0,0 +1,5 @@
import { get } from '../../api/request'
enum Api {
server='/health-emergency/emergency/tblUserHelp/statistics'
}
export const list = (params) => get(Api.server, params)
src/components/body-d-left/oneL.vue
+84 -63
View File
@@ -1,88 +1,109 @@
<template> <template>
<div> <div>
<public-title title="服务详情数据"/> <public-title title="服务详情数据"/>
<div class="inner"> <div class="inner">
<div class="type-time"> <div class="type-time">
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span> <span
</div> v-for="(item, index) in typeTime"
<div class="server-container"> :key="index"
<div class="server-item" v-for="(item,index) in dataLists" :key="index"> :class="selectIndex === index ? 'select' : 'unSelect'"
<span>{{item.title}}</span> @click="handleSelect(index)"
<span>{{item.iphone}}</span> >{{ item.name }}</span
</div> >
</div> </div>
<div class="server-container">
<div v-for="(item, index) in dataLists" :key="index" class="server-item">
<span>{{ item.title }}</span>
<span>{{ item.iphone }}</span>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import {onMounted, ref} from 'vue';
import PublicTitle from "../publicTitle.vue"; import PublicTitle from '../publicTitle.vue';
import {list} from './left.api';
const typeTime = ref([ const typeTime = ref([
{ {
name:'全部', name: '全部',
value:'all', value: 'all',
},{ },
name:'本年', {
value:'year', name: '本年',
}, value: 'year',
{ },
name:'本月', {
value:'month', name: '本月',
}, value: 'month',
{ },
name:'本周', {
value:'week', name: '本周',
} value: 'week',
]) },
]);
const dataLists = ref([ const dataLists = ref([
{ {
title:'最新呼入电话', title: '最新呼入电话',
iphone:'18394578789' iphone: '18394578789',
}, },
{ {
title:'最新呼入电话', title: '最新呼入电话',
iphone:'18394578789' iphone: '18394578789',
}, },
{ {
title:'最新呼入电话', title: '最新呼入电话',
iphone:'18394578789' iphone: '18394578789',
}, },
{ {
title:'最新呼入电话', title: '最新呼入电话',
iphone:'18394578789' iphone: '18394578789',
}, },
]) ]);
const selectIndex = ref(0) const selectIndex = ref(0);
onMounted(() => {
list({
condition: '',
}).then(() => {
function handleSelect(index:number){ });
});
function handleSelect(index: number) {
selectIndex.value = index; selectIndex.value = index;
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.inner { .inner {
height: calc(100% - 40px); height: calc(100% - 40px);
.server-container{
color: #A3A4A4; .server-container {
padding-top: 4%; color: #a3a4a4;
height: 88%; padding-top: 4%;
display: grid; height: 88%;
align-items: start; display: grid;
.server-item{ align-items: start;
font-size: 16px;
span{ .server-item {
display: inline-block; font-size: 16px;
width: 50%;
font-weight: bold; span {
} display: inline-block;
span:nth-child(1){ width: 50%;
text-align: left; font-weight: bold;
padding-left: 5%; }
}
span:nth-child(2){ span:nth-child(1) {
text-align: right; text-align: left;
padding-right: 6%; padding-left: 5%;
} }
span:nth-child(2) {
text-align: right;
padding-right: 6%;
} }
} }
}
} }
</style> </style>
src/components/body-d-left/threeL.vue
+94 -83
View File
@@ -1,97 +1,108 @@
<template> <template>
<div> <div>
<public-title title="体检数据"/> <public-title title="体检数据" />
<div class="inner"> <div class="inner">
<div class="type-time"> <div class="type-time">
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" @click="handleSelect(index)">{{item.name}}</span> <span
</div> :class="selectIndex === index ? 'select' : 'unSelect'"
<div class="physical-container"> v-for="(item, index) in typeTime"
<div class="physical-item"> :key="index"
<span>10444人</span> @click="handleSelect(index)"
<span>兴隆圆医院</span> >{{ item.name }}</span
>
</div> </div>
<div class="physical-item"> <div class="physical-container">
<span>144人</span> <div class="physical-item">
<span>兴隆圆医院</span> <span>10444人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>344人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>延安</span>
</div>
</div> </div>
<div class="physical-item">
<span>344人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>兴隆圆医院</span>
</div>
<div class="physical-item">
<span>144人</span>
<span>延安</span>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue"; import PublicTitle from '../publicTitle.vue';
const typeTime = ref([ const typeTime = ref([
{ {
name:'全部', name: '全部',
value:'all', value: 'all',
},{ },
name:'本年', {
value:'year', name: '本年',
}, value: 'year',
{ },
name:'本月', {
value:'month', name: '本月',
}, value: 'month',
{ },
name:'本周', {
value:'week', name: '本周',
} value: 'week',
]) },
const physical = ref(); ]);
const selectIndex = ref(0) const physical = ref();
function handleSelect(index:number){ const selectIndex = ref(0);
selectIndex.value = index; function handleSelect(index: number) {
} selectIndex.value = index;
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.inner { .inner {
height: calc(100% - 40px); height: calc(100% - 40px);
.physical-container{ .physical-container {
width: 96%; width: 96%;
height: 92%; height: 92%;
padding-top: 2%; padding-top: 2%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-around; align-content: space-around;
.physical-item{ .physical-item {
width: 33%; width: 33%;
height: 46%; height: 46%;
color: #FFFFFF; color: #ffffff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
span:nth-child(1){ span:nth-child(1) {
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
}
span:nth-child(2) {
font-size: 16px;
}
}
.physical-item:nth-child(1),
.physical-item:nth-child(2),
.physical-item:nth-child(3) {
background: url('../../assets/images/physical-top.png') no-repeat;
background-size: 100% 100%;
}
.physical-item:nth-child(4),
.physical-item:nth-child(5),
.physical-item:nth-child(6) {
background: url('../../assets/images/physical-bottom.png') no-repeat;
background-size: 100% 100%;
}
} }
span:nth-child(2){
font-size: 16px;
}
}
.physical-item:nth-child(1),.physical-item:nth-child(2),.physical-item:nth-child(3){
background: url("../../assets/images/physical-top.png") no-repeat;
background-size: 100% 100%;
}
.physical-item:nth-child(4),.physical-item:nth-child(5),.physical-item:nth-child(6){
background: url("../../assets/images/physical-bottom.png") no-repeat;
background-size: 100% 100%;
}
} }
}
</style> </style>
src/components/body-d-left/twoL.vue
+184 -181
View File
@@ -1,200 +1,203 @@
<template> <template>
<div> <div>
<public-title title="主诉分类"/> <public-title title="主诉分类" />
<div class="inner"> <div class="inner">
<div class="title"> <div class="title">
<div class="type-check"> <div class="type-check">
<span :class="selectIndex===index?'select':'unSelect'" v-for="(item,index) in typeTime" :key="index" <span
@click="handleSelect(index)">{{ item.name }}</span> :class="selectIndex === index ? 'select' : 'unSelect'"
v-for="(item, index) in typeTime"
:key="index"
@click="handleSelect(index)"
>{{ item.name }}</span
>
</div>
<div class="type-all">
<a-select v-model:value="typesSelect" class="type-select">
<a-select-option value="全部数据">全部数据</a-select-option>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
</a-select>
</div>
</div>
<div class="line-chart" ref="chiefChart"></div>
</div> </div>
<div class="type-all">
<a-select v-model:value="typesSelect" class="type-select" >
<a-select-option value="全部数据">全部数据</a-select-option>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
</a-select>
</div>
</div>
<div class="line-chart" ref="chiefChart"></div>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {ref, onMounted} from 'vue'; import { ref, onMounted } from 'vue';
import PublicTitle from "../publicTitle.vue"; import PublicTitle from '../publicTitle.vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
const typesSelect = ref('全部数据') const typesSelect = ref('全部数据');
const typeTime = ref([ const typeTime = ref([
{ {
name: '男', name: '男',
value: 'man', value: 'man',
}, { },
name: '女', {
value: 'women', name: '女',
}, value: 'women',
]) },
const selectIndex = ref(0) ]);
const chiefChart = ref<HTMLElement>() const selectIndex = ref(0);
onMounted(() => { const chiefChart = ref<HTMLElement>();
let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他']; onMounted(() => {
let ydata = [120, 200, 150, 80, 70, 110, 130]; let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
initChart(xdata, ydata) let ydata = [120, 200, 150, 80, 70, 110, 130];
}) initChart(xdata, ydata);
});
function initChart(xData, ydata) { function initChart(xData, ydata) {
let myChart = echarts.init(chiefChart.value) let myChart = echarts.init(chiefChart.value);
let options = { let options = {
grid: { grid: {
top: '10%', top: '10%',
left: '8%', left: '8%',
right: '8%', right: '8%',
bottom: '20%' bottom: '20%',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xData, data: xData,
axisLabel: { axisLabel: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: 14, fontSize: 14,
}, },
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
color: '#FFFFFF', color: '#FFFFFF',
fontSize: 14, fontSize: 14,
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: 'dashed', type: 'dashed',
color: 'rgba(217, 231, 255, 0.2)' color: 'rgba(217, 231, 255, 0.2)',
} },
} },
}, },
series: [ series: [
{ {
data: ydata, data: ydata,
type: 'bar', type: 'bar',
barWidth: '20%', barWidth: '20%',
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
0, 0, 0, 1, { offset: 0, color: '#008CFF' },
[ { offset: 1, color: '#33CBFE' },
{offset: 0, color: '#008CFF'}, ]),
{offset: 1, color: '#33CBFE'} },
] },
) ],
} };
} myChart.setOption(options);
] window.addEventListener('resize', () => {
} myChart.resize();
myChart.setOption(options) });
window.addEventListener('resize', () => { }
myChart.resize();
});
}
function handleSelect(index) { function handleSelect(index) {
selectIndex.value = index selectIndex.value = index;
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.inner { .inner {
height: calc(100% - 40px); height: calc(100% - 40px);
.title { .title {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: right; justify-content: right;
padding: 2% 0; padding: 2% 0;
.type-check { .type-check {
color: #ffffff; color: #ffffff;
width: 15%; width: 15%;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
span { span {
padding: 0 2%; padding: 0 2%;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
} }
.select { .select {
color: #45A2FF; color: #45a2ff;
position: relative; position: relative;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
width: 100%; width: 100%;
left: 0; left: 0;
bottom: -12px; bottom: -12px;
height: 6px; height: 6px;
background: url("../../assets/images/light.png") no-repeat; background: url('../../assets/images/light.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
}
}
.unSelect {
color: #a3a4a4;
}
}
.type-all {
width: 18%;
color: #ffffff;
.type-select {
width: 94%;
color: #008cff;
}
}
}
.line-chart {
margin: 0 auto;
width: 96%;
height: 80%;
} }
}
.unSelect {
color: #A3A4A4;
}
} }
.type-all {
width: 18%;
color: #ffffff;
.type-select {
width: 94%;
color: #008CFF;
}
}
}
.line-chart {
margin: 0 auto;
width: 96%;
height: 80%;
}
}
</style> </style>
<style lang="less"> <style lang="less">
.ant-select-dropdown{ .ant-select-dropdown {
background-color: #00152b!important; background-color: #00152b !important;
border-right: 1px solid #1b7ef2; border-right: 1px solid #1b7ef2;
border-left: 1px solid #1b7ef2; border-left: 1px solid #1b7ef2;
border-bottom: 1px solid #1b7ef2; border-bottom: 1px solid #1b7ef2;
} }
.ant-select-item{ .ant-select-item {
color: #1b7ef2!important; color: #1b7ef2 !important;
} }
//框背景色 //框背景色
.ant-select:not(.ant-select-customize-input) .ant-select-selector{ .ant-select:not(.ant-select-customize-input) .ant-select-selector {
color: #1b7ef2!important; color: #1b7ef2 !important;
background-color: transparent!important; background-color: transparent !important;
border: 1px solid #1b7ef2 !important; border: 1px solid #1b7ef2 !important;
} }
.ant-select-item-option-selected{ .ant-select-item-option-selected {
color: #ffffff!important; color: #ffffff !important;
} }
// 选中字体颜色 // 选中字体颜色
.ant-select-selection-item{ .ant-select-selection-item {
color: #1b7ef2!important; color: #1b7ef2 !important;
} }
.ant-select-item-option-active{ .ant-select-item-option-active {
background-color:transparent!important; background-color: transparent !important;
} }
.ant-select-item-option-active:hover{ .ant-select-item-option-active:hover {
background-color: #002e64!important; background-color: #002e64 !important;
} }
// 箭头颜色 // 箭头颜色
.ant-select-arrow { .ant-select-arrow {
color: #1b7ef2 !important; color: #1b7ef2 !important;
} }
.ant-select-item-option-selected:not(.ant-select-item-option-disabled){ .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color:#002e64!important; background-color: #002e64 !important;
} }
</style> </style>
src/components/body-d-right/oneR.vue
+309 -305
View File
@@ -1,318 +1,322 @@
<template> <template>
<div class="terminal-container"> <div class="terminal-container">
<public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog"/> <public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog" />
<div class="inner"> <div class="inner">
<vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7"> <vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
<div class="item" v-for="(item, index) in policeLists" :key="index"> <div class="item" v-for="(item, index) in policeLists" :key="index">
<span>{{item.name}}</span> <span>{{ item.name }}</span>
<span>{{item.abnormal}}</span> <span>{{ item.abnormal }}</span>
<div class="time-icon"> <div class="time-icon">
<span>{{item.time}}</span> <span>{{ item.time }}</span>
<span class="terminal-icon" @click="handlePolice"></span> <span class="terminal-icon" @click="handlePolice"></span>
</div> </div>
</div>
</vue3-seamless-scroll>
</div> </div>
</vue3-seamless-scroll> <Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose">
<template #container>
<div class="dialog-con">
<a-table :dataSource="dataSource" :columns="columns" :scroll="{ y: '56vh' }" :pagination="false" />
</div>
</template>
</Dialog>
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
<template #container>
<div class="police-con">
<div class="con-item">
<span>姓名：</span>
<span>{{ userInfo.name }}</span>
</div>
<div class="con-item">
<span>二级单位：</span>
<span>{{ userInfo.unit }}</span>
</div>
<div class="con-item">
<span>手机号码：</span>
<span>{{ userInfo.iphone }}</span>
</div>
<div class="con-item">
<span>异常事件：</span>
<span>{{ userInfo.abnormal }}</span>
</div>
<div class="con-item">
<span>发生时间：</span>
<span>{{ userInfo.time }}</span>
</div>
<div class="con-item">
<span>发生地点：</span>
<span>{{ userInfo.address }}</span>
</div>
</div>
</template>
</Dialog>
</div> </div>
<Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose">
<template #container>
<div class="dialog-con">
<a-table :dataSource="dataSource" :columns="columns" :scroll="{y:'56vh'}" :pagination=false />
</div>
</template>
</Dialog>
<Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
<template #container>
<div class="police-con">
<div class="con-item">
<span>姓名：</span>
<span>{{userInfo.name}}</span>
</div>
<div class="con-item">
<span>二级单位：</span>
<span>{{userInfo.unit}}</span>
</div>
<div class="con-item">
<span>手机号码：</span>
<span>{{userInfo.iphone}}</span>
</div>
<div class="con-item">
<span>异常事件：</span>
<span>{{userInfo.abnormal}}</span>
</div>
<div class="con-item">
<span>发生时间：</span>
<span>{{userInfo.time}}</span>
</div>
<div class="con-item">
<span>发生地点：</span>
<span>{{userInfo.address}}</span>
</div>
</div>
</template>
</Dialog>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue"; import PublicTitle from '../publicTitle.vue';
import Dialog from '../dialog/Dialog.vue'; import Dialog from '../dialog/Dialog.vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll"; import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const policeLists = ref([ const policeLists = ref([
{ {
name: '陈天宇', name: '陈天宇',
abnormal: '压力异常(82)', abnormal: '压力异常(82)',
time: '2023-8-25', time: '2023-8-25',
}, },
{ {
name: '陈天宇', name: '陈天宇',
abnormal: '压力异常(82)', abnormal: '压力异常(82)',
time: '2023-8-25', time: '2023-8-25',
}, },
{ {
name: '陈天宇', name: '陈天宇',
abnormal: '压力异常(82)', abnormal: '压力异常(82)',
time: '2023-8-25', time: '2023-8-25',
}, },
{ {
name: '陈天宇', name: '陈天宇',
abnormal: '压力异常(82)', abnormal: '压力异常(82)',
time: '2023-8-25', time: '2023-8-25',
}, },
{ {
name: '陈天宇', name: '陈天宇',
abnormal: '压力异常(82)', abnormal: '压力异常(82)',
time: '2023-8-25', time: '2023-8-25',
}, },
{ {
name: '陈天宇', name: '陈天宇',
abnormal: '压力异常(82)', abnormal: '压力异常(82)',
time: '2023-8-25', time: '2023-8-25',
} },
])
const open = ref<boolean>(false);
const openInfor = ref<boolean>(false);
const userInfo = ref({
name:'王苗',
unit:'长庆油田',
iphone:'1897263745',
abnormal:'体温异常',
time:'2023-11-23 16:23',
address:'陕西省西安市'
});
const dataSource=ref([
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}, {
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
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',
}
]); ]);
function handleDialog(){ const open = ref<boolean>(false);
open.value = true const openInfor = ref<boolean>(false);
} const userInfo = ref({
function handleClose(){ name: '王苗',
open.value = false unit: '长庆油田',
} iphone: '1897263745',
function handlePolice(){ abnormal: '体温异常',
openInfor.value = true time: '2023-11-23 16:23',
} address: '陕西省西安市',
function handlePoliceClose(){ });
openInfor.value = false
} const dataSource = ref([
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
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',
},
]);
function handleDialog() {
open.value = true;
}
function handleClose() {
open.value = false;
}
function handlePolice() {
openInfor.value = true;
}
function handlePoliceClose() {
openInfor.value = false;
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.inner { .inner {
height: calc(100% - 40px); height: calc(100% - 40px);
display: flex;
align-items: center;
justify-content: center;
.scroll {
width: 90%;
height: 88%;
overflow: hidden;
.item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 3% 0;
span{
color:#ffffff;
font-size: 16px;
}
.time-icon {
display: flex; display: flex;
align-items: center; align-items: center;
} justify-content: center;
.terminal-icon { .scroll {
margin-left: 20px; width: 90%;
display: inline-block; height: 88%;
width: 18px; overflow: hidden;
height: 18px; .item {
background: url("../../assets/images/terminal.png") no-repeat; display: flex;
background-size: 100% 100%; align-items: center;
cursor:pointer; justify-content: space-between;
} padding: 3% 0;
span {
color: #ffffff;
font-size: 16px;
}
.time-icon {
display: flex;
align-items: center;
}
.terminal-icon {
margin-left: 20px;
display: inline-block;
width: 18px;
height: 18px;
background: url('../../assets/images/terminal.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
}
}
} }
} .dialog-con {
} background-color: #00152b;
.dialog-con{ border: 1px solid #129bff;
background-color: #00152B; }
border: 1px solid #129BFF; .police-con {
} color: #ffffff;
.police-con{ background-color: #00152b;
color: #ffffff; border: 1px solid #129bff;
background-color: #00152B; padding: 2% 0 2% 5%;
border: 1px solid #129BFF; .con-item {
padding: 2% 0 2% 5%; padding: 1.3% 0;
.con-item{ span:nth-child(1) {
padding: 1.3% 0; font-weight: bold;
span:nth-child(1){ display: inline-block;
font-weight: bold; width: 20%;
display: inline-block; text-align: right;
width: 20%; }
text-align: right; span:nth-child(2) {
} padding-left: 2%;
span:nth-child(2){ }
padding-left: 2%; }
}
} }
}
</style> </style>
src/components/body-d-right/threeR.vue
+30 -31
View File
@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<public-title title="基层医疗点远程会诊"/> <public-title title="基层医疗点远程会诊" />
<div class="inner"> <div class="inner">
<div class="inner-item"></div> <div class="inner-item"></div>
<div class="inner-item"></div> <div class="inner-item"></div>
@@ -10,37 +10,36 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import PublicTitle from '../publicTitle.vue';
import PublicTitle from "../publicTitle.vue";
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.inner { .inner {
width: 100%; width: 100%;
height: calc(100% - 40px); height: calc(100% - 40px);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
align-content: space-around; align-content: space-around;
padding-top: 2%; padding-top: 2%;
.inner-item{ .inner-item {
width: 48%; width: 48%;
height: 46%; height: 46%;
}
.inner-item:nth-child(1) {
background: url('../../assets/images/doctors1.png') no-repeat;
background-size: 100% 100%;
}
.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%;
}
} }
.inner-item:nth-child(1){
background: url("../../assets/images/doctors1.png")no-repeat;
background-size: 100% 100%;
}
.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%;
}
}
</style> </style>
src/components/body-d-right/twoR.vue
+73 -73
View File
@@ -1,83 +1,83 @@
<template> <template>
<div> <div>
<public-title title="长庆油田大病人数"/> <public-title title="长庆油田大病人数" />
<div class="inner" ref="healthChart"></div> <div class="inner" ref="healthChart"></div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import PublicTitle from "../publicTitle.vue"; import PublicTitle from '../publicTitle.vue';
const healthChart = ref<HTMLElement>() const healthChart = ref<HTMLElement>();
onMounted(()=>{ onMounted(() => {
let xdata = ['创伤类', '心血管', '心神类', '呼吸类' , '消化类', '肿瘤类', '其他']; let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
let ydata = [120, 200, 150, 80, 70, 110, 130]; let ydata = [120, 200, 150, 80, 70, 110, 130];
initChart(xdata,ydata) initChart(xdata, ydata);
}) });
function initChart(xData,ydata){ function initChart(xData, ydata) {
let myChart = echarts.init(healthChart.value) let myChart = echarts.init(healthChart.value);
let options = { let options = {
title:{ title: {
text:'总人数\n', text: '总人数\n',
subtext: '1980', subtext: '1980',
x: 'center', x: 'center',
y: 'center', y: 'center',
textStyle: { textStyle: {
fontSize:18, fontSize: 18,
color: '#ffffff', color: '#ffffff',
}, },
subtextStyle: { subtextStyle: {
color: '#ffffff', color: '#ffffff',
fontSize: 28, fontSize: 28,
}, },
}, },
color:['#0098FA','#0CD9B5','#3B72AD'], color: ['#0098FA', '#0CD9B5', '#3B72AD'],
tooltip: { tooltip: {
trigger: 'item' trigger: 'item',
}, },
legend: { legend: {
bottom: '0', bottom: '0',
left: 'center', left: 'center',
icon: 'circle', icon: 'circle',
textStyle:{ textStyle: {
color:'#ffffff', color: '#ffffff',
fontSize:16, fontSize: 16,
}, },
}, },
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['50%', '80%'], radius: ['50%', '80%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
show: true, show: true,
position: 'inner', position: 'inner',
formatter: '{d}%', formatter: '{d}%',
color:'#ffffff', color: '#ffffff',
fontSize:16 fontSize: 16,
}, },
labelLine: { labelLine: {
show: false show: false,
}, },
data: [ data: [
{ value: 1048, name: '高危人数' }, { value: 1048, name: '高危人数' },
{ value: 735, name: '中危人数' }, { value: 735, name: '中危人数' },
{ value: 580, name: '可控人数' }, { value: 580, name: '可控人数' },
] ],
} },
] ],
} };
myChart.setOption(options) myChart.setOption(options);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
myChart.resize(); myChart.resize();
}); });
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.inner { .inner {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
height: calc(100% - 40px); height: calc(100% - 40px);
} }
</style> </style>
src/components/dialog/Dialog.vue
+54 -59
View File
@@ -1,67 +1,62 @@
<template> <template>
<a-modal <a-modal class="dialog" v-model:visible="props.openVis" :title="props.title" :width="props.width" :maskClosable="true" @cancel="handleCancel">
class="dialog" <slot name="container"></slot>
v-model:visible="props.openVis" <template #footer></template>
:title="props.title" </a-modal>
:width="props.width"
:maskClosable="true"
@cancel="handleCancel"
>
<slot name="container"></slot>
<template #footer></template>
</a-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, defineEmits } from 'vue'; import { defineProps, defineEmits } from 'vue';
const emit = defineEmits(['close']) const emit = defineEmits(['close']);
const props = defineProps({ const props = defineProps({
width:{ width: {
type: String type: String,
}, },
openVis:{ openVis: {
type:Boolean type: Boolean,
}, },
title:{ title: {
type:String type: String,
} },
}) });
function handleCancel(){ function handleCancel() {
emit('close') emit('close');
} }
</script> </script>
<style lang="less"> <style lang="less">
.dialog{ .dialog {
.ant-modal-title{ .ant-modal-title {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
height: 56px; height: 56px;
background: url("../../assets/images/dialog.png") no-repeat; background: url('../../assets/images/dialog.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #ffffff!important; color: #ffffff !important;
padding-left: 2%; padding-left: 2%;
} }
.ant-modal-header{ .ant-modal-header {
padding: 0!important; padding: 0 !important;
padding-bottom: 0; padding-bottom: 0;
} }
.ant-modal-header,.ant-modal-content{ .ant-modal-header,
background-color: transparent!important; .ant-modal-content {
} background-color: transparent !important;
.ant-modal-body{ }
padding: 0!important; .ant-modal-body {
} padding: 0 !important;
.ant-modal-close-x,.anticon { }
color: #999999!important; .ant-modal-close-x,
} .anticon {
.ant-modal-footer{ color: #999999 !important;
border-top: none!important; }
} .ant-modal-footer {
.ant-modal-wrap{ border-top: none !important;
background-color: rgba(0,0,0,0.6); }
} .ant-modal-wrap {
} background-color: rgba(0, 0, 0, 0.6);
}
}
</style> </style>