update 更换背景图 看板接口对接
This commit is contained in:
zk
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 8.1 MiB |
@@ -1,4 +1,5 @@
|
||||
import { ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export const timeTab = [
|
||||
{
|
||||
@@ -18,6 +19,16 @@ export const timeTab = [
|
||||
value: '4',
|
||||
},
|
||||
];
|
||||
export const sexType = [
|
||||
{
|
||||
name: '男',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
value: '1',
|
||||
},
|
||||
];
|
||||
|
||||
export function useSpin() {
|
||||
const spinning = ref(true);
|
||||
@@ -30,4 +41,110 @@ export function useSpin() {
|
||||
spinning,
|
||||
setSpin,
|
||||
};
|
||||
}
|
||||
|
||||
export const hospitalList = [
|
||||
{
|
||||
title: '兴隆医院',
|
||||
key: 'tangdu',
|
||||
},
|
||||
{
|
||||
title: '泾河医院',
|
||||
key: 'zhigong',
|
||||
},
|
||||
{
|
||||
title: '宁夏宝石花医院',
|
||||
key: 'yangehu',
|
||||
},
|
||||
{
|
||||
title: '庆阳医院',
|
||||
key: 'changan',
|
||||
},
|
||||
{
|
||||
title: '延安市人民医院',
|
||||
key: 'yananshi',
|
||||
},
|
||||
{
|
||||
title: '西京医院',
|
||||
key: 'xijing',
|
||||
},
|
||||
];
|
||||
|
||||
export function barOption(xData, ydata) {
|
||||
function maxCount() {
|
||||
if (ydata.length) {
|
||||
return Math.max(...ydata) < 5 ? 5 : null;
|
||||
} else {
|
||||
return 5;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
grid: {
|
||||
top: '18%',
|
||||
left: '8%',
|
||||
right: '8%',
|
||||
bottom: '15%',
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
backgroundColor: 'rgba(50,50,50,0.7)',
|
||||
borderColor: '#1b7ef2',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
},
|
||||
axisLine: {
|
||||
color: '#bac9e1',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: '次数',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
padding: [0, 0, 0, -15],
|
||||
},
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: 'rgba(217, 231, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
min: 0,
|
||||
max: maxCount(),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: ydata,
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#008CFF' },
|
||||
{ offset: 1, color: '#33CBFE' },
|
||||
]),
|
||||
},
|
||||
barMaxWidth: '10',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#33CBFE',
|
||||
fontWeight: 'normal',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -1,8 +1,17 @@
|
||||
import { get } from '../../api/request';
|
||||
import { get } from '/@/api/request';
|
||||
|
||||
enum Api {
|
||||
export enum Api {
|
||||
departList = '/sys/sysDepart/allSecondaryDeparts',
|
||||
server = '/health-emergency/emergency/tblUserHelp/statistics',
|
||||
getDetail = '/health-emergency/emergency/tblHealthData/getDetail',
|
||||
complaint = '/health-emergency/emergency/tblHelpCenter/sicknessTypeStatistic',
|
||||
}
|
||||
|
||||
export const list = (params) => get(Api.server, params);
|
||||
//获取全部部门
|
||||
export const getDepart = (params: any) => get(Api.departList, params);
|
||||
//服务详情数据
|
||||
export const list = (params: any) => get(Api.server, params);
|
||||
//主诉分类
|
||||
export const complaint = (params: any) => get(Api.complaint, params);
|
||||
//体检数据
|
||||
export const getDetail = (params: any) => get(Api.getDetail, params);
|
||||
@@ -32,13 +32,15 @@
|
||||
const selectIndex = ref(0);
|
||||
const selectVal = ref('1');
|
||||
const { setSpin, spinning } = useSpin();
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
async function getList() {
|
||||
setSpin(true);
|
||||
try {
|
||||
const { code, result } = (await list({ condition: selectVal.value })) || [];
|
||||
const { code, result } = (await list({ condition: selectVal.value })) || {};
|
||||
setSpin(!spinning.value);
|
||||
if (code != 200) {
|
||||
return;
|
||||
|
||||
@@ -5,104 +5,111 @@
|
||||
<div class="type-time">
|
||||
<span
|
||||
:class="selectIndex === index ? 'select' : 'unSelect'"
|
||||
v-for="(item, index) in typeTime"
|
||||
v-for="(item, index) in timeTab"
|
||||
:key="index"
|
||||
@click="handleSelect(index)"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="physical-container">
|
||||
<div class="physical-item">
|
||||
<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>
|
||||
<a-spin :spinning="spinning" class="spin"></a-spin>
|
||||
<div class="physical-item" v-for="(item, i) in hospitalList" :key="i" :class="[i < 3 ? 'b1' : 'b2']">
|
||||
<div class="ct">
|
||||
<div class="value">{{ countData[item.key] || '' }}</div>
|
||||
<div class="label">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import PublicTitle from '../publicTitle.vue';
|
||||
const typeTime = ref([
|
||||
{
|
||||
name: '全部',
|
||||
value: 'all',
|
||||
},
|
||||
{
|
||||
name: '本年',
|
||||
value: 'year',
|
||||
},
|
||||
{
|
||||
name: '本月',
|
||||
value: 'month',
|
||||
},
|
||||
{
|
||||
name: '本周',
|
||||
value: 'week',
|
||||
},
|
||||
]);
|
||||
const physical = ref();
|
||||
import { getDetail } from '/@/components/body-d-left/left.api';
|
||||
import { hospitalList, useSpin, timeTab } from '/@/components/body-d-left/bodyLeftHooks';
|
||||
|
||||
const { setSpin, spinning } = useSpin();
|
||||
const selectIndex = ref(0);
|
||||
|
||||
function handleSelect(index: number) {
|
||||
selectIndex.value = index;
|
||||
setSpin(true);
|
||||
setTimeout(() => {
|
||||
setSpin(false);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
const countData = ref({});
|
||||
|
||||
async function getList() {
|
||||
setSpin(true);
|
||||
try {
|
||||
const { code, result } = (await getDetail({})) || {};
|
||||
setSpin(!spinning.value);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
countData.value = result[0] || {};
|
||||
console.log('result', result);
|
||||
} catch {
|
||||
setSpin(!spinning.value);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.physical-container {
|
||||
width: 96%;
|
||||
height: 92%;
|
||||
padding-top: 2%;
|
||||
padding-top: 6%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
position: relative;
|
||||
|
||||
.spin {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.physical-item {
|
||||
width: 33%;
|
||||
height: 46%;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
span:nth-child(1) {
|
||||
font-size: 22px;
|
||||
|
||||
.ct {
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 16px;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.physical-item:nth-child(1),
|
||||
.physical-item:nth-child(2),
|
||||
.physical-item:nth-child(3) {
|
||||
|
||||
.b1 {
|
||||
background: url('../../assets/images/physical-top.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: 95% 95%;
|
||||
}
|
||||
.physical-item:nth-child(4),
|
||||
.physical-item:nth-child(5),
|
||||
.physical-item:nth-child(6) {
|
||||
|
||||
.b2 {
|
||||
background: url('../../assets/images/physical-bottom.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: 95% 95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -5,107 +5,112 @@
|
||||
<div class="title">
|
||||
<div class="type-check">
|
||||
<span
|
||||
:class="selectIndex === index ? 'select' : 'unSelect'"
|
||||
v-for="(item, index) in typeTime"
|
||||
:class="sexIndex === index ? 'select' : 'unSelect'"
|
||||
v-for="(item, index) in sexType"
|
||||
:key="index"
|
||||
@click="handleSelect(index)"
|
||||
>{{ item.name }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="type-all">
|
||||
<a-select v-model:value="typesSelect" class="type-select">
|
||||
<a-select v-model:value="selectValue" class="type-select" :options="selectOptions">
|
||||
<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>
|
||||
<a-spin :spinning="spinning" class="spin"></a-spin>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import PublicTitle from '../publicTitle.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
|
||||
import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
|
||||
const typesSelect = ref('全部数据');
|
||||
const typeTime = ref([
|
||||
{
|
||||
name: '男',
|
||||
value: 'man',
|
||||
},
|
||||
{
|
||||
name: '女',
|
||||
value: 'women',
|
||||
},
|
||||
]);
|
||||
const selectIndex = ref(0);
|
||||
const { setSpin, spinning } = useSpin();
|
||||
|
||||
const sexIndex = ref(0);
|
||||
const chiefChart = ref<HTMLElement>();
|
||||
|
||||
const selectOptions = ref([{ label: '全部数据', value: 'all' }]);
|
||||
const selectValue = ref('all');
|
||||
|
||||
function handleSelect(index: number) {
|
||||
sexIndex.value = index;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
|
||||
let ydata = [120, 200, 150, 80, 70, 110, 130];
|
||||
initChart(xdata, ydata);
|
||||
init();
|
||||
});
|
||||
|
||||
function init() {
|
||||
getDepartOption();
|
||||
getList();
|
||||
}
|
||||
|
||||
async function getDepartOption() {
|
||||
const { code, result } = await getDepart({});
|
||||
if (code == 200) {
|
||||
const arr = result?.map((item) => ({ ...item, label: item?.departName, value: item?.orgCode }));
|
||||
selectOptions.value = [{ label: '全部数据', value: 'all' }, ...arr];
|
||||
}
|
||||
}
|
||||
|
||||
async function getList() {
|
||||
setSpin(true);
|
||||
try {
|
||||
const searchParams = {
|
||||
sex: sexType[sexIndex.value].value,
|
||||
depart: selectValue.value == 'all' ? '' : selectValue.value,
|
||||
};
|
||||
const { code, result } = (await complaint(searchParams)) || {};
|
||||
setSpin(false);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
if (Array.isArray(result) && result.length == 0) {
|
||||
return EmptyChart();
|
||||
}
|
||||
const xData = result.map((item) => item.name);
|
||||
const yData = result.map((item) => item.count);
|
||||
initChart(xData, yData);
|
||||
} catch {
|
||||
setSpin(false);
|
||||
EmptyChart();
|
||||
}
|
||||
}
|
||||
|
||||
watch([selectValue, sexIndex], () => {
|
||||
getList();
|
||||
});
|
||||
|
||||
function EmptyChart() {
|
||||
initChart([], []);
|
||||
}
|
||||
|
||||
function initChart(xData, ydata) {
|
||||
let myChart = echarts.init(chiefChart.value);
|
||||
let options = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '8%',
|
||||
right: '8%',
|
||||
bottom: '20%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: 'rgba(217, 231, 255, 0.2)',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: ydata,
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#008CFF' },
|
||||
{ offset: 1, color: '#33CBFE' },
|
||||
]),
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
let options = barOption(xData, ydata);
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function handleSelect(index) {
|
||||
selectIndex.value = index;
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
position: relative;
|
||||
height: calc(100% - 40px);
|
||||
|
||||
.spin {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -148,15 +153,16 @@
|
||||
}
|
||||
|
||||
.type-all {
|
||||
width: 18%;
|
||||
color: #ffffff;
|
||||
margin-right: 10px;
|
||||
|
||||
.type-select {
|
||||
width: 94%;
|
||||
width: 120px;
|
||||
color: #008cff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line-chart {
|
||||
margin: 0 auto;
|
||||
width: 96%;
|
||||
@@ -171,33 +177,41 @@
|
||||
border-left: 1px solid #1b7ef2;
|
||||
border-bottom: 1px solid #1b7ef2;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
|
||||
background-color: #002e64 !important;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
import { computed, ref } from 'vue';
|
||||
// 列表字段
|
||||
export const columns = [
|
||||
{
|
||||
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',
|
||||
},
|
||||
];
|
||||
|
||||
//大病人数
|
||||
export function useHealth() {
|
||||
const healthData = ref([
|
||||
{
|
||||
name: '高危人数',
|
||||
value: '0',
|
||||
type: '1',
|
||||
type_dictText: '恶性肿瘤',
|
||||
},
|
||||
{
|
||||
name: '中危人数',
|
||||
value: '0',
|
||||
type: '2',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '可控人数',
|
||||
value: '0',
|
||||
type: '3',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
]);
|
||||
const getValue = computed(() => healthData.value.map((item) => item.value));
|
||||
const getName = computed(() => healthData.value.map((item) => item.name));
|
||||
|
||||
function setHealth(data) {
|
||||
data?.map((item1) => {
|
||||
healthData.value.map((item2) => {
|
||||
if (item1.type == item2.type) {
|
||||
item2.value = item1.count;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
healthData,
|
||||
getValue,
|
||||
getName,
|
||||
setHealth,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
<div class="terminal-container">
|
||||
<public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog" />
|
||||
<div class="inner">
|
||||
<vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
|
||||
<div class="item" v-for="(item, index) in policeLists" :key="index">
|
||||
<span>{{ item.name }}</span>
|
||||
<span>{{ item.abnormal }}</span>
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
|
||||
<div class="item" v-for="item in scrollList" :key="item.id">
|
||||
<span>{{ item?.realName }}</span>
|
||||
<span>{{ item?.eventType_dictText }}</span>
|
||||
<div class="time-icon">
|
||||
<span>{{ item.time }}</span>
|
||||
<span class="terminal-icon" @click="handlePolice"></span>
|
||||
<span>{{ item?.warnTime }}</span>
|
||||
<span class="terminal-icon" @click="handlePolice(item)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
@@ -53,42 +53,16 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import PublicTitle from '../publicTitle.vue';
|
||||
import Dialog from '../dialog/Dialog.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
const policeLists = ref([
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
{
|
||||
name: '陈天宇',
|
||||
abnormal: '压力异常(82)',
|
||||
time: '2023-8-25',
|
||||
},
|
||||
]);
|
||||
import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
|
||||
|
||||
const classOption = {
|
||||
step: 0.3, // 速度
|
||||
};
|
||||
const open = ref<boolean>(false);
|
||||
const openInfor = ref<boolean>(false);
|
||||
const userInfo = ref({
|
||||
@@ -107,160 +81,41 @@
|
||||
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;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getScrollList();
|
||||
});
|
||||
|
||||
/**
|
||||
* @desc 终端报警
|
||||
* */
|
||||
const scrollList = ref([]);
|
||||
|
||||
async function getScrollList() {
|
||||
const { code, result } = await getMonitorList({});
|
||||
if (code == 200) {
|
||||
scrollList.value = result;
|
||||
}
|
||||
|
||||
console.log('dd', result);
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
@@ -268,23 +123,28 @@
|
||||
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;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.terminal-icon {
|
||||
margin-left: 20px;
|
||||
display: inline-block;
|
||||
@@ -297,26 +157,31 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-con {
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
}
|
||||
|
||||
.police-con {
|
||||
color: #ffffff;
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
padding: 2% 0 2% 5%;
|
||||
|
||||
.con-item {
|
||||
padding: 1.3% 0;
|
||||
|
||||
span:nth-child(1) {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
padding-left: 2%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -0,0 +1,12 @@
|
||||
import { get } from '/src/api/request';
|
||||
|
||||
export enum Api {
|
||||
getMonitorList = '/health-watch/watch/watchMonitorData/getMonitorList',
|
||||
getHealthDataList = '/health-emergency/emergency/tblHealthData/getHealthDataList',
|
||||
}
|
||||
|
||||
//健康终端报警
|
||||
|
||||
export const getMonitorList = (params: any) => get(Api.getMonitorList, params);
|
||||
//长庆油田大病人数
|
||||
export const getHealthDataList = (params: any) => get(Api.getHealthDataList, params);
|
||||
@@ -5,36 +5,64 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, unref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from '../publicTitle.vue';
|
||||
import { getHealthDataList } from '/@/components/body-d-right/right.api';
|
||||
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
|
||||
|
||||
const { setSpin, spinning } = useSpin();
|
||||
const healthChart = ref<HTMLElement>();
|
||||
onMounted(() => {
|
||||
let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
|
||||
let ydata = [120, 200, 150, 80, 70, 110, 130];
|
||||
initChart(xdata, ydata);
|
||||
// let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
|
||||
// let ydata = [120, 200, 150, 80, 70, 110, 130];
|
||||
// initChart(xdata, ydata);
|
||||
init();
|
||||
});
|
||||
function initChart(xData, ydata) {
|
||||
const { healthData, getValue, getName, setHealth } = useHealth();
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const { code, result } = await getHealthDataList();
|
||||
setSpin(true);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setHealth(result);
|
||||
const yData = unref(getValue);
|
||||
let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
||||
console.log('yData', yData);
|
||||
initChart(unref(healthData), total);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function initChart(chartData, total = 0) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = {
|
||||
title: {
|
||||
text: '总人数\n',
|
||||
subtext: '1980',
|
||||
subtext: total,
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
fontSize: 16,
|
||||
color: '#ffffff',
|
||||
},
|
||||
subtextStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 28,
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
backgroundColor: 'rgba(50,50,50,0.7)',
|
||||
borderColor: '#1b7ef2',
|
||||
},
|
||||
legend: {
|
||||
bottom: '0',
|
||||
@@ -60,11 +88,7 @@
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '高危人数' },
|
||||
{ value: 735, name: '中危人数' },
|
||||
{ value: 580, name: '可控人数' },
|
||||
],
|
||||
data: chartData,
|
||||
},
|
||||
],
|
||||
};
|
||||
@@ -80,4 +104,4 @@
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
+7
-4
@@ -4,8 +4,8 @@
|
||||
<div class="title-d-left">
|
||||
{{ dayTimeO }}
|
||||
</div>
|
||||
<div class="title-d-middle"> 应急就医服务中心 </div>
|
||||
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }} </div>
|
||||
<div class="title-d-middle"> 应急就医服务中心</div>
|
||||
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
|
||||
</div>
|
||||
<div class="body-d">
|
||||
<div class="body-d-left">
|
||||
@@ -35,8 +35,10 @@
|
||||
import ThreeR from '../components/body-d-right/threeR.vue';
|
||||
import ChinaMap from '../components/chinaMap/chinaMap.vue';
|
||||
import * as dayjs from 'dayjs';
|
||||
|
||||
const dayTimeO = ref();
|
||||
const dayTimeT = ref();
|
||||
|
||||
function init() {
|
||||
getTime();
|
||||
setInterval(() => {
|
||||
@@ -47,7 +49,7 @@
|
||||
function getTime() {
|
||||
dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
|
||||
dayTimeT.value =
|
||||
dayjs().diff(dayjs('2020-01-01'), 'day') +
|
||||
dayjs().diff(dayjs('2018-10-01'), 'day') +
|
||||
'天' +
|
||||
getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
|
||||
'时' +
|
||||
@@ -136,6 +138,7 @@
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -147,4 +150,4 @@
|
||||
background: url('../assets/images/bottom-b.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user