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
-3
View File
@@ -1,3 +0,0 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}
+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);
})
});
}
+3
View File
@@ -0,0 +1,3 @@
const requestURL = "http://192.168.1.16";
export default requestURL
+9 -8
View File
@@ -10,7 +10,7 @@
}
.select {
color: #45A2FF;
color: #45a2ff;
position: relative;
&:after {
@@ -21,13 +21,13 @@
left: 6px;
bottom: -12px;
height: 6px;
background: url("../images/light.png") no-repeat;
background: url('../images/light.png') no-repeat;
background-size: 100% 100%;
}
}
.unSelect {
color: #A3A4A4;
color: #a3a4a4;
}
}
*::-webkit-scrollbar {
@@ -47,7 +47,7 @@
height: 6px;
border-radius: 25px;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.30);
background-color: rgba(0, 0, 0, 0.3);
}
/*
antd表格样式
@@ -56,19 +56,20 @@
border-bottom: 1px solid #1e73c2 !important;
}
.ant-table-body {
background-color: #00152B;
background-color: #00152b;
}
.ant-modal-header {
border-bottom: none !important;
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid #1e73c2 !important;
background-color: #00152B;
background-color: #00152b;
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-tbody > tr > td.ant-table-cell-row-hover,
.ant-table-thead > tr > th {
background-color: #00152B!important;
background-color: #00152b !important;
color: #ffffff !important;
}
.ant-table-cell-scrollbar {
+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)
+35 -14
View File
@@ -3,10 +3,16 @@
<public-title title="服务详情数据"/>
<div class="inner">
<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 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.iphone }}</span>
</div>
@@ -15,13 +21,16 @@
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue";
import {onMounted, ref} from 'vue';
import PublicTitle from '../publicTitle.vue';
import {list} from './left.api';
const typeTime = ref([
{
name: '全部',
value: 'all',
},{
},
{
name: '本年',
value: 'year',
},
@@ -32,27 +41,34 @@ const typeTime = ref([
{
name: '本周',
value: 'week',
}
])
},
]);
const dataLists = ref([
{
title: '最新呼入电话',
iphone:'18394578789'
iphone: '18394578789',
},
{
title: '最新呼入电话',
iphone:'18394578789'
iphone: '18394578789',
},
{
title: '最新呼入电话',
iphone:'18394578789'
iphone: '18394578789',
},
{
title: '最新呼入电话',
iphone:'18394578789'
iphone: '18394578789',
},
])
const selectIndex = ref(0)
]);
const selectIndex = ref(0);
onMounted(() => {
list({
condition: '',
}).then(() => {
});
});
function handleSelect(index: number) {
selectIndex.value = index;
@@ -61,23 +77,28 @@ function handleSelect(index:number){
<style scoped lang="less">
.inner {
height: calc(100% - 40px);
.server-container {
color: #A3A4A4;
color: #a3a4a4;
padding-top: 4%;
height: 88%;
display: grid;
align-items: start;
.server-item {
font-size: 16px;
span {
display: inline-block;
width: 50%;
font-weight: bold;
}
span:nth-child(1) {
text-align: left;
padding-left: 5%;
}
span:nth-child(2) {
text-align: right;
padding-right: 6%;
+22 -11
View File
@@ -3,7 +3,13 @@
<public-title title="体检数据" />
<div class="inner">
<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 class="physical-container">
<div class="physical-item">
@@ -36,12 +42,13 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue";
import PublicTitle from '../publicTitle.vue';
const typeTime = ref([
{
name: '全部',
value: 'all',
},{
},
{
name: '本年',
value: 'year',
},
@@ -52,10 +59,10 @@ const typeTime = ref([
{
name: '本周',
value: 'week',
}
])
},
]);
const physical = ref();
const selectIndex = ref(0)
const selectIndex = ref(0);
function handleSelect(index: number) {
selectIndex.value = index;
}
@@ -73,7 +80,7 @@ function handleSelect(index:number){
.physical-item {
width: 33%;
height: 46%;
color: #FFFFFF;
color: #ffffff;
display: flex;
flex-direction: column;
span:nth-child(1) {
@@ -84,12 +91,16 @@ function handleSelect(index:number){
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;
.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;
.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%;
}
}
+34 -31
View File
@@ -4,8 +4,13 @@
<div class="inner">
<div class="title">
<div class="type-check">
<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 class="type-all">
<a-select v-model:value="typesSelect" class="type-select">
@@ -21,35 +26,36 @@
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import PublicTitle from "../publicTitle.vue";
import PublicTitle from '../publicTitle.vue';
import * as echarts from 'echarts';
const typesSelect = ref('全部数据')
const typesSelect = ref('全部数据');
const typeTime = ref([
{
name: '男',
value: 'man',
}, {
},
{
name: '女',
value: 'women',
},
])
const selectIndex = ref(0)
const chiefChart = ref<HTMLElement>()
]);
const selectIndex = ref(0);
const chiefChart = ref<HTMLElement>();
onMounted(() => {
let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
let ydata = [120, 200, 150, 80, 70, 110, 130];
initChart(xdata, ydata)
})
initChart(xdata, ydata);
});
function initChart(xData, ydata) {
let myChart = echarts.init(chiefChart.value)
let myChart = echarts.init(chiefChart.value);
let options = {
grid: {
top: '10%',
left: '8%',
right: '8%',
bottom: '20%'
bottom: '20%',
},
xAxis: {
type: 'category',
@@ -69,9 +75,9 @@ function initChart(xData, ydata) {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(217, 231, 255, 0.2)'
}
}
color: 'rgba(217, 231, 255, 0.2)',
},
},
},
series: [
{
@@ -79,25 +85,22 @@ function initChart(xData, ydata) {
type: 'bar',
barWidth: '20%',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#008CFF' },
{offset: 1, color: '#33CBFE'}
]
)
}
}
]
}
myChart.setOption(options)
{ offset: 1, color: '#33CBFE' },
]),
},
},
],
};
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
});
}
function handleSelect(index) {
selectIndex.value = index
selectIndex.value = index;
}
</script>
<style scoped lang="less">
@@ -123,7 +126,7 @@ function handleSelect(index) {
}
.select {
color: #45A2FF;
color: #45a2ff;
position: relative;
&:after {
@@ -134,13 +137,13 @@ function handleSelect(index) {
left: 0;
bottom: -12px;
height: 6px;
background: url("../../assets/images/light.png") no-repeat;
background: url('../../assets/images/light.png') no-repeat;
background-size: 100% 100%;
}
}
.unSelect {
color: #A3A4A4;
color: #a3a4a4;
}
}
@@ -150,7 +153,7 @@ function handleSelect(index) {
.type-select {
width: 94%;
color: #008CFF;
color: #008cff;
}
}
}
+26 -22
View File
@@ -16,7 +16,7 @@
<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 />
<a-table :dataSource="dataSource" :columns="columns" :scroll="{ y: '56vh' }" :pagination="false" />
</div>
</template>
</Dialog>
@@ -54,9 +54,9 @@
</template>
<script setup lang="ts">
import { ref } from 'vue';
import PublicTitle from "../publicTitle.vue";
import PublicTitle from '../publicTitle.vue';
import Dialog from '../dialog/Dialog.vue';
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
const policeLists = ref([
{
name: '陈天宇',
@@ -87,8 +87,8 @@
name: '陈天宇',
abnormal: '压力异常(82)',
time: '2023-8-25',
}
])
},
]);
const open = ref<boolean>(false);
const openInfor = ref<boolean>(false);
const userInfo = ref({
@@ -97,7 +97,7 @@
iphone: '1897263745',
abnormal: '体温异常',
time: '2023-11-23 16:23',
address:'陕西省西安市'
address: '陕西省西安市',
});
const dataSource = ref([
@@ -136,7 +136,8 @@
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}, {
},
{
key: '2',
name: '胡彦祖',
age: 42,
@@ -147,7 +148,8 @@
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}, {
},
{
key: '2',
name: '胡彦祖',
age: 42,
@@ -158,7 +160,8 @@
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}, {
},
{
key: '2',
name: '胡彦祖',
age: 42,
@@ -169,7 +172,8 @@
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}, {
},
{
key: '2',
name: '胡彦祖',
age: 42,
@@ -180,7 +184,8 @@
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
}, {
},
{
key: '2',
name: '胡彦祖',
age: 42,
@@ -242,19 +247,19 @@
dataIndex: 'address2',
align: 'center',
key: 'address2',
}
},
]);
function handleDialog() {
open.value = true
open.value = true;
}
function handleClose() {
open.value = false
open.value = false;
}
function handlePolice() {
openInfor.value = true
openInfor.value = true;
}
function handlePoliceClose() {
openInfor.value = false
openInfor.value = false;
}
</script>
<style scoped lang="less">
@@ -285,7 +290,7 @@
display: inline-block;
width: 18px;
height: 18px;
background: url("../../assets/images/terminal.png") no-repeat;
background: url('../../assets/images/terminal.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
@@ -293,13 +298,13 @@
}
}
.dialog-con {
background-color: #00152B;
border: 1px solid #129BFF;
background-color: #00152b;
border: 1px solid #129bff;
}
.police-con {
color: #ffffff;
background-color: #00152B;
border: 1px solid #129BFF;
background-color: #00152b;
border: 1px solid #129bff;
padding: 2% 0 2% 5%;
.con-item {
padding: 1.3% 0;
@@ -314,5 +319,4 @@
}
}
}
</style>
+5 -6
View File
@@ -10,8 +10,7 @@
</div>
</template>
<script setup lang="ts">
import PublicTitle from "../publicTitle.vue";
import PublicTitle from '../publicTitle.vue';
</script>
<style scoped lang="less">
.inner {
@@ -27,19 +26,19 @@ import PublicTitle from "../publicTitle.vue";
height: 46%;
}
.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%;
}
.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%;
}
.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%;
}
.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%;
}
}
+13 -13
View File
@@ -7,16 +7,16 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import PublicTitle from "../publicTitle.vue";
import PublicTitle from '../publicTitle.vue';
const healthChart = ref<HTMLElement>()
const healthChart = ref<HTMLElement>();
onMounted(() => {
let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
let ydata = [120, 200, 150, 80, 70, 110, 130];
initChart(xdata,ydata)
})
initChart(xdata, ydata);
});
function initChart(xData, ydata) {
let myChart = echarts.init(healthChart.value)
let myChart = echarts.init(healthChart.value);
let options = {
title: {
text: '总人数\n',
@@ -34,7 +34,7 @@ function initChart(xData,ydata){
},
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
tooltip: {
trigger: 'item'
trigger: 'item',
},
legend: {
bottom: '0',
@@ -55,20 +55,20 @@ function initChart(xData,ydata){
position: 'inner',
formatter: '{d}%',
color: '#ffffff',
fontSize:16
fontSize: 16,
},
labelLine: {
show: false
show: false,
},
data: [
{ value: 1048, name: '高危人数' },
{ value: 735, name: '中危人数' },
{ value: 580, name: '可控人数' },
]
}
]
}
myChart.setOption(options)
],
},
],
};
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
});
+13 -18
View File
@@ -1,12 +1,5 @@
<template>
<a-modal
class="dialog"
v-model:visible="props.openVis"
:title="props.title"
:width="props.width"
:maskClosable="true"
@cancel="handleCancel"
>
<a-modal class="dialog" v-model:visible="props.openVis" :title="props.title" :width="props.width" :maskClosable="true" @cancel="handleCancel">
<slot name="container"></slot>
<template #footer></template>
</a-modal>
@@ -14,20 +7,20 @@
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
const emit = defineEmits(['close'])
const emit = defineEmits(['close']);
const props = defineProps({
width: {
type: String
type: String,
},
openVis: {
type:Boolean
type: Boolean,
},
title: {
type:String
}
})
type: String,
},
});
function handleCancel() {
emit('close')
emit('close');
}
</script>
@@ -39,7 +32,7 @@
align-items: center;
width: 100%;
height: 56px;
background: url("../../assets/images/dialog.png") no-repeat;
background: url('../../assets/images/dialog.png') no-repeat;
background-size: 100% 100%;
color: #ffffff !important;
padding-left: 2%;
@@ -48,13 +41,15 @@
padding: 0 !important;
padding-bottom: 0;
}
.ant-modal-header,.ant-modal-content{
.ant-modal-header,
.ant-modal-content {
background-color: transparent !important;
}
.ant-modal-body {
padding: 0 !important;
}
.ant-modal-close-x,.anticon {
.ant-modal-close-x,
.anticon {
color: #999999 !important;
}
.ant-modal-footer {