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
+20 -19
View File
@@ -10,7 +10,7 @@
} }
.select { .select {
color: #45A2FF; color: #45a2ff;
position: relative; position: relative;
&:after { &:after {
@@ -21,13 +21,13 @@
left: 6px; left: 6px;
bottom: -12px; bottom: -12px;
height: 6px; height: 6px;
background: url("../images/light.png") no-repeat; background: url('../images/light.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.unSelect { .unSelect {
color: #A3A4A4; color: #a3a4a4;
} }
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
@@ -47,32 +47,33 @@
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;
} }
/* /*
表格滚动条 表格滚动条
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
+55 -34
View File
@@ -3,82 +3,103 @@
<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
v-for="(item, index) in typeTime"
:key="index"
:class="selectIndex === index ? 'select' : 'unSelect'"
@click="handleSelect(index)"
>{{ item.name }}</span
>
</div> </div>
<div class="server-container"> <div class="server-container">
<div class="server-item" v-for="(item,index) in dataLists" :key="index"> <div v-for="(item, index) in dataLists" :key="index" class="server-item">
<span>{{item.title}}</span> <span>{{ item.title }}</span>
<span>{{item.iphone}}</span> <span>{{ item.iphone }}</span>
</div> </div>
</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:'本月', name: '本年',
value:'month', value: 'year',
}, },
{ {
name:'本周', name: '本月',
value:'week', value: 'month',
} },
]) {
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 {
color: #a3a4a4;
padding-top: 4%; padding-top: 4%;
height: 88%; height: 88%;
display: grid; display: grid;
align-items: start; align-items: start;
.server-item{
.server-item {
font-size: 16px; font-size: 16px;
span{
span {
display: inline-block; display: inline-block;
width: 50%; width: 50%;
font-weight: bold; font-weight: bold;
} }
span:nth-child(1){
span:nth-child(1) {
text-align: left; text-align: left;
padding-left: 5%; padding-left: 5%;
} }
span:nth-child(2){
span:nth-child(2) {
text-align: right; text-align: right;
padding-right: 6%; padding-right: 6%;
} }
src/components/body-d-left/threeL.vue
+42 -31
View File
@@ -1,9 +1,15 @@
<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
:class="selectIndex === index ? 'select' : 'unSelect'"
v-for="(item, index) in typeTime"
:key="index"
@click="handleSelect(index)"
>{{ item.name }}</span
>
</div> </div>
<div class="physical-container"> <div class="physical-container">
<div class="physical-item"> <div class="physical-item">
@@ -35,63 +41,68 @@
</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:'本月', name: '本年',
value:'month', value: 'year',
}, },
{ {
name:'本周', name: '本月',
value:'week', value: 'month',
} },
]) {
const physical = ref(); name: '本周',
const selectIndex = ref(0) value: 'week',
function handleSelect(index:number){ },
]);
const physical = ref();
const selectIndex = ref(0);
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);
.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){ span:nth-child(2) {
font-size: 16px; font-size: 16px;
} }
} }
.physical-item:nth-child(1),.physical-item:nth-child(2),.physical-item:nth-child(3){ .physical-item:nth-child(1),
background: url("../../assets/images/physical-top.png") no-repeat; .physical-item:nth-child(2),
.physical-item:nth-child(3) {
background: url('../../assets/images/physical-top.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.physical-item:nth-child(4),.physical-item:nth-child(5),.physical-item:nth-child(6){ .physical-item:nth-child(4),
background: url("../../assets/images/physical-bottom.png") no-repeat; .physical-item:nth-child(5),
.physical-item:nth-child(6) {
background: url('../../assets/images/physical-bottom.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
} }
</style> </style>
src/components/body-d-left/twoL.vue
+78 -75
View File
@@ -1,14 +1,19 @@
<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>
<div class="type-all"> <div class="type-all">
<a-select v-model:value="typesSelect" class="type-select" > <a-select v-model:value="typesSelect" class="type-select">
<a-select-option value="全部数据">全部数据</a-select-option> <a-select-option value="全部数据">全部数据</a-select-option>
<a-select-option value="jack">Jack</a-select-option> <a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option> <a-select-option value="lucy">Lucy</a-select-option>
@@ -20,36 +25,37 @@
</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: '女', name: '女',
value: 'women', value: 'women',
}, },
]) ]);
const selectIndex = ref(0) const selectIndex = ref(0);
const chiefChart = ref<HTMLElement>() const chiefChart = 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(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',
@@ -69,9 +75,9 @@ function initChart(xData, ydata) {
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: [
{ {
@@ -79,29 +85,26 @@ function initChart(xData, 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);
]
}
myChart.setOption(options)
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
myChart.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%;
@@ -123,7 +126,7 @@ function handleSelect(index) {
} }
.select { .select {
color: #45A2FF; color: #45a2ff;
position: relative; position: relative;
&:after { &:after {
@@ -134,13 +137,13 @@ function handleSelect(index) {
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 { .unSelect {
color: #A3A4A4; color: #a3a4a4;
} }
} }
@@ -150,7 +153,7 @@ function handleSelect(index) {
.type-select { .type-select {
width: 94%; width: 94%;
color: #008CFF; color: #008cff;
} }
} }
} }
@@ -159,42 +162,42 @@ function handleSelect(index) {
width: 96%; width: 96%;
height: 80%; 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;
}
//框背景色
.ant-select:not(.ant-select-customize-input) .ant-select-selector{
color: #1b7ef2!important;
background-color: transparent!important;
border: 1px solid #1b7ef2 !important;
}
.ant-select-item-option-selected{
color: #ffffff!important;
}
// 选中字体颜色
.ant-select-selection-item{
color: #1b7ef2!important;
}
.ant-select-item-option-active{
background-color:transparent!important;
}
.ant-select-item-option-active:hover{
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; .ant-select:not(.ant-select-customize-input) .ant-select-selector {
} color: #1b7ef2 !important;
background-color: transparent !important;
border: 1px solid #1b7ef2 !important;
}
.ant-select-item-option-selected {
color: #ffffff !important;
}
// 选中字体颜色
.ant-select-selection-item {
color: #1b7ef2 !important;
}
.ant-select-item-option-active {
background-color: transparent !important;
}
.ant-select-item-option-active:hover {
background-color: #002e64 !important;
}
// 箭头颜色
.ant-select-arrow {
color: #1b7ef2 !important;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: #002e64 !important;
}
</style> </style>
src/components/body-d-right/oneR.vue
+64 -60
View File
@@ -1,13 +1,13 @@
<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> </div>
@@ -16,7 +16,7 @@
<Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose"> <Dialog :openVis="open" width="65%" title="健康终端报警列表" @close="handleClose">
<template #container> <template #container>
<div class="dialog-con"> <div class="dialog-con">
<a-table :dataSource="dataSource" :columns="columns" :scroll="{y:'56vh'}" :pagination=false /> <a-table :dataSource="dataSource" :columns="columns" :scroll="{ y: '56vh' }" :pagination="false" />
</div> </div>
</template> </template>
</Dialog> </Dialog>
@@ -25,27 +25,27 @@
<div class="police-con"> <div class="police-con">
<div class="con-item"> <div class="con-item">
<span>姓名：</span> <span>姓名：</span>
<span>{{userInfo.name}}</span> <span>{{ userInfo.name }}</span>
</div> </div>
<div class="con-item"> <div class="con-item">
<span>二级单位：</span> <span>二级单位：</span>
<span>{{userInfo.unit}}</span> <span>{{ userInfo.unit }}</span>
</div> </div>
<div class="con-item"> <div class="con-item">
<span>手机号码：</span> <span>手机号码：</span>
<span>{{userInfo.iphone}}</span> <span>{{ userInfo.iphone }}</span>
</div> </div>
<div class="con-item"> <div class="con-item">
<span>异常事件：</span> <span>异常事件：</span>
<span>{{userInfo.abnormal}}</span> <span>{{ userInfo.abnormal }}</span>
</div> </div>
<div class="con-item"> <div class="con-item">
<span>发生时间：</span> <span>发生时间：</span>
<span>{{userInfo.time}}</span> <span>{{ userInfo.time }}</span>
</div> </div>
<div class="con-item"> <div class="con-item">
<span>发生地点：</span> <span>发生地点：</span>
<span>{{userInfo.address}}</span> <span>{{ userInfo.address }}</span>
</div> </div>
</div> </div>
</template> </template>
@@ -54,9 +54,9 @@
</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: '陈天宇',
@@ -87,20 +87,20 @@
name: '陈天宇', name: '陈天宇',
abnormal: '压力异常(82)', abnormal: '压力异常(82)',
time: '2023-8-25', time: '2023-8-25',
} },
]) ]);
const open = ref<boolean>(false); const open = ref<boolean>(false);
const openInfor = ref<boolean>(false); const openInfor = ref<boolean>(false);
const userInfo = ref({ const userInfo = ref({
name:'王苗', name: '王苗',
unit:'长庆油田', unit: '长庆油田',
iphone:'1897263745', iphone: '1897263745',
abnormal:'体温异常', abnormal: '体温异常',
time:'2023-11-23 16:23', time: '2023-11-23 16:23',
address:'陕西省西安市' address: '陕西省西安市',
}); });
const dataSource=ref([ const dataSource = ref([
{ {
key: '1', key: '1',
name: '胡彦斌', name: '胡彦斌',
@@ -136,7 +136,8 @@
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 42,
address: '西湖区湖底公园1号', address: '西湖区湖底公园1号',
}, { },
{
key: '2', key: '2',
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 42,
@@ -147,7 +148,8 @@
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 42,
address: '西湖区湖底公园1号', address: '西湖区湖底公园1号',
}, { },
{
key: '2', key: '2',
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 42,
@@ -158,7 +160,8 @@
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 42,
address: '西湖区湖底公园1号', address: '西湖区湖底公园1号',
}, { },
{
key: '2', key: '2',
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 42,
@@ -169,7 +172,8 @@
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 42,
address: '西湖区湖底公园1号', address: '西湖区湖底公园1号',
}, { },
{
key: '2', key: '2',
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 42,
@@ -180,7 +184,8 @@
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 42,
address: '西湖区湖底公园1号', address: '西湖区湖底公园1号',
}, { },
{
key: '2', key: '2',
name: '胡彦祖', name: '胡彦祖',
age: 42, age: 42,
@@ -194,67 +199,67 @@
}, },
]); ]);
const columns= ref([ const columns = ref([
{ {
title: '姓名', title: '姓名',
dataIndex: 'name', dataIndex: 'name',
align:'center', align: 'center',
key: 'name', key: 'name',
}, },
{ {
title: '单位信息', title: '单位信息',
dataIndex: 'age', dataIndex: 'age',
align:'center', align: 'center',
key: 'age', key: 'age',
}, },
{ {
title: '联系电话', title: '联系电话',
dataIndex: 'address', dataIndex: 'address',
align:'center', align: 'center',
key: 'address', key: 'address',
}, },
{ {
title: '联系电话', title: '联系电话',
dataIndex: 'address1', dataIndex: 'address1',
align:'center', align: 'center',
key: 'address1', key: 'address1',
}, },
{ {
title: '异常事件', title: '异常事件',
dataIndex: 'address2', dataIndex: 'address2',
align:'center', align: 'center',
key: 'address2', key: 'address2',
}, },
{ {
title: '异常值', title: '异常值',
dataIndex: 'address2', dataIndex: 'address2',
align:'center', align: 'center',
key: 'address2', key: 'address2',
}, },
{ {
title: '发生时间', title: '发生时间',
dataIndex: 'address2', dataIndex: 'address2',
align:'center', align: 'center',
key: 'address2', key: 'address2',
}, },
{ {
title: '发生地点', title: '发生地点',
dataIndex: 'address2', dataIndex: 'address2',
align:'center', align: 'center',
key: 'address2', key: 'address2',
} },
]); ]);
function handleDialog(){ function handleDialog() {
open.value = true open.value = true;
} }
function handleClose(){ function handleClose() {
open.value = false open.value = false;
} }
function handlePolice(){ function handlePolice() {
openInfor.value = true openInfor.value = true;
} }
function handlePoliceClose(){ function handlePoliceClose() {
openInfor.value = false openInfor.value = false;
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
@@ -272,8 +277,8 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 3% 0; padding: 3% 0;
span{ span {
color:#ffffff; color: #ffffff;
font-size: 16px; font-size: 16px;
} }
.time-icon { .time-icon {
@@ -285,34 +290,33 @@
display: inline-block; display: inline-block;
width: 18px; width: 18px;
height: 18px; height: 18px;
background: url("../../assets/images/terminal.png") no-repeat; background: url('../../assets/images/terminal.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
cursor:pointer; cursor: pointer;
} }
} }
} }
}
.dialog-con{
background-color: #00152B;
border: 1px solid #129BFF;
} }
.police-con{ .dialog-con {
background-color: #00152b;
border: 1px solid #129bff;
}
.police-con {
color: #ffffff; color: #ffffff;
background-color: #00152B; background-color: #00152b;
border: 1px solid #129BFF; border: 1px solid #129bff;
padding: 2% 0 2% 5%; padding: 2% 0 2% 5%;
.con-item{ .con-item {
padding: 1.3% 0; padding: 1.3% 0;
span:nth-child(1){ span:nth-child(1) {
font-weight: bold; font-weight: bold;
display: inline-block; display: inline-block;
width: 20%; width: 20%;
text-align: right; text-align: right;
} }
span:nth-child(2){ span:nth-child(2) {
padding-left: 2%; padding-left: 2%;
} }
} }
} }
</style> </style>
src/components/body-d-right/threeR.vue
+11 -12
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,8 +10,7 @@
</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 {
@@ -22,24 +21,24 @@ import PublicTitle from "../publicTitle.vue";
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){ .inner-item:nth-child(1) {
background: url("../../assets/images/doctors1.png")no-repeat; background: url('../../assets/images/doctors1.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.inner-item:nth-child(2){ .inner-item:nth-child(2) {
background: url("../../assets/images/doctors2.png")no-repeat; background: url('../../assets/images/doctors2.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.inner-item:nth-child(3){ .inner-item:nth-child(3) {
background: url("../../assets/images/doctors3.png")no-repeat; background: url('../../assets/images/doctors3.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.inner-item:nth-child(4){ .inner-item:nth-child(4) {
background: url("../../assets/images/doctors4.png")no-repeat; background: url('../../assets/images/doctors4.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
src/components/body-d-right/twoR.vue
+30 -30
View File
@@ -1,30 +1,30 @@
<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: {
@@ -32,17 +32,17 @@ function initChart(xData,ydata){
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: [
@@ -54,30 +54,30 @@ function initChart(xData,ydata){
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
+31 -36
View File
@@ -1,12 +1,5 @@
<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"
v-model:visible="props.openVis"
:title="props.title"
:width="props.width"
:maskClosable="true"
@cancel="handleCancel"
>
<slot name="container"></slot> <slot name="container"></slot>
<template #footer></template> <template #footer></template>
</a-modal> </a-modal>
@@ -14,54 +7,56 @@
<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{ .ant-modal-body {
padding: 0!important; padding: 0 !important;
} }
.ant-modal-close-x,.anticon { .ant-modal-close-x,
color: #999999!important; .anticon {
color: #999999 !important;
} }
.ant-modal-footer{ .ant-modal-footer {
border-top: none!important; border-top: none !important;
}
.ant-modal-wrap {
background-color: rgba(0, 0, 0, 0.6);
} }
.ant-modal-wrap{
background-color: rgba(0,0,0,0.6);
} }
}
</style> </style>