340 lines
13 KiB
Vue
340 lines
13 KiB
Vue
<style scoped lang='scss'>
|
||
.layout_card1 {
|
||
:deep(.layout_card) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.card_round {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.card_content {
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
display: flex;
|
||
width: 20%;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.card_content_num {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.layout_card2 {
|
||
padding: 20px 0;
|
||
|
||
.card_content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.layout_title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.layout_chart {
|
||
width: 100%;
|
||
height: 300px;
|
||
}
|
||
</style>
|
||
|
||
<template>
|
||
<div class='overall-container'>
|
||
<el-row :gutter="20" class="layout_card1">
|
||
<el-col :span="12">
|
||
<el-card body-class="layout_card">
|
||
<div class="card_content">
|
||
<div>异常总人数</div>
|
||
<div class="card_content_num">100人</div>
|
||
</div>
|
||
<div class="card_round" style="background: #bbc8ef;">
|
||
<img src="@/assets/images/pages/icon_abnormal_personnel.png" alt="">
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card body-class="layout_card">
|
||
<div class="card_content">
|
||
<div>异常类型分布</div>
|
||
<div class="card_content_num">3类</div>
|
||
</div>
|
||
<div class="layout_title">主要异常：<span style="color: red;">心率异常</span></div>
|
||
<div class="card_round" style="background: #ffcc8d;">
|
||
<img src="@/assets/images/pages/icon_distribution.png" alt="">
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20" class="layout_card2">
|
||
<el-col :span="12">
|
||
<el-card>
|
||
<div class="card_content">
|
||
<div class="layout_title">异常趋势分析</div>
|
||
<div>
|
||
<el-button v-for="item in timeRanges" :key="item.value"
|
||
:type="activeTimeRange === item.value ? 'primary' : ''"
|
||
@click="activeTimeRange = item.value">{{ item.text }}</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="layout_chart" ref="chart1Ref"></div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card>
|
||
<div class="card_content">
|
||
<div class="layout_title">年龄分布分析</div>
|
||
<div>
|
||
<el-button style="opacity: 0;"></el-button>
|
||
</div>
|
||
</div>
|
||
<div class="layout_chart" ref="chart2Ref"></div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-card>
|
||
<div class="layout_title" style="padding-bottom: 20px;">异常记录明细</div>
|
||
<div class="search-container">
|
||
<el-form class="search-container-from">
|
||
<el-form-item label="项目" class="layout-pr10">
|
||
<el-select v-model="projectState" placeholder="请选择项目" filterable class="layout-w200">
|
||
<el-option v-for="i in projectList" :key="i.Id" :label="i.AC002" :value="i.Id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="标段" class="layout-pr10">
|
||
<el-select v-model="sectionState" placeholder="请选择标段" filterable class="layout-w200">
|
||
<el-option v-for="i in sectionList" :key="i.Id" :label="i.BC02" :value="i.Id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="劳务队" class="layout-pr10">
|
||
<el-select v-model="laborTeamState" placeholder="请选择劳务队" filterable class="layout-w200">
|
||
<el-option v-for="i in laborTeamList" :key="i.Id" :label="i.DC01" :value="i.Id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="异常类型" class="layout-pr10">
|
||
<el-select v-model="exceptionState" placeholder="请选择异常类型" filterable class="layout-w200">
|
||
<el-option v-for="i in exceptionList" :key="i.Id" :label="i.Name" :value="i.Id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item class="layout-pr10">
|
||
<el-button type="primary" icon="Search" @click="onSearch">查询</el-button>
|
||
</el-form-item>
|
||
<el-form-item class="layout-pr10">
|
||
<el-button type="primary" icon="ArrowUp" @click="onExport">导出</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<el-table class="table-container" v-loading="tableLoading" ref="tableRef" :data="tableData" border
|
||
:height="tableHeight" width="100%">
|
||
<el-table-column label="序号" type="index" align="center" max-width="120" fixed="left" />
|
||
<el-table-column prop="A1" label="项目名称" fixed="left" align="left" min-width="180"
|
||
show-overflow-tooltip />
|
||
<el-table-column prop="A2" label="标段名称" fixed="left" align="left" min-width="180"
|
||
show-overflow-tooltip />
|
||
<el-table-column prop="A3" label="劳务队名称" fixed="left" align="left" min-width="180"
|
||
show-overflow-tooltip />
|
||
<el-table-column prop="A4" label="姓名" fixed="left" align="center" min-width="120"
|
||
show-overflow-tooltip />
|
||
<el-table-column prop="A5" label="性别" fixed="left" align="center" min-width="80"
|
||
show-overflow-tooltip />
|
||
<el-table-column prop="A6" label="年龄" align="center" min-width="80" show-overflow-tooltip />
|
||
<el-table-column prop="A7" label="异常类型" align="center" min-width="80" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-tag v-if="scope.row.A7 === '血压异常'" color="#bbc8ef" style="color: #344875;">{{ scope.row.A7
|
||
}}</el-tag>
|
||
<el-tag v-if="scope.row.A7 === '血氧异常'" color="#b4e9e2" style="color: #63b09b;">{{ scope.row.A7
|
||
}}</el-tag>
|
||
<el-tag v-if="scope.row.A7 === '心率异常'" color="#ffcc8d" style="color: #da8122;">{{ scope.row.A7
|
||
}}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="A8" label="异常值" align="center" min-width="100" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<div v-if="scope.row.A7 === '血压异常'">{{ scope.row.A8 }}mmHG</div>
|
||
<div v-if="scope.row.A7 === '血氧异常'">{{ scope.row.A8 }}%</div>
|
||
<div v-if="scope.row.A7 === '心率异常'">{{ scope.row.A8 }}BPM</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="A9" label="发生时间" align="center" min-width="150" show-overflow-tooltip />
|
||
</el-table>
|
||
<el-pagination class="layout-pagination" :current-page="currentPage" :page-size="pageSize"
|
||
:page-sizes="pageSizes" :size="size" :disabled="disabled" :background="background"
|
||
layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
|
||
@size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, ref, watch } from 'vue'
|
||
|
||
const timeRanges = [
|
||
{ text: '近7天', value: '7' },
|
||
{ text: '近30天', value: '30' },
|
||
{ text: '近90天', value: '90' }
|
||
]
|
||
const activeTimeRange = ref('7')
|
||
|
||
watch(activeTimeRange, (newVal) => {
|
||
console.log(newVal);
|
||
})
|
||
|
||
|
||
|
||
import * as echarts from 'echarts'
|
||
const chart1Ref = ref(null)
|
||
const renderChart1 = () => {
|
||
const chart1 = echarts.init(chart1Ref.value)
|
||
const option = {
|
||
|
||
};
|
||
chart1.setOption(option)
|
||
}
|
||
|
||
|
||
|
||
const chart2Ref = ref(null)
|
||
const renderChart2 = () => {
|
||
const chart2 = echarts.init(chart2Ref.value)
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
formatter: function (params) {
|
||
return params[0].name + '异常主要区间为：' + '<br>' + params[0].value + '岁' + '-' + (params[0].value + params[1].value) + '岁'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
name: '岁',
|
||
type: 'value',
|
||
min: 18,
|
||
max: 65,
|
||
axisLine: {
|
||
show: true
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
formatter: function (value) {
|
||
return value + '岁';
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
splitLine: { show: false },
|
||
data: ['心率', '血压', '血氧']
|
||
},
|
||
series: [
|
||
{
|
||
name: '背景',
|
||
type: 'bar',
|
||
stack: 'Total',
|
||
itemStyle: {
|
||
color: 'rgba(0,0,0,0.05)',
|
||
barBorderRadius: 4
|
||
},
|
||
data: [33, 38, 50]
|
||
},
|
||
{
|
||
name: '指标',
|
||
type: 'bar',
|
||
stack: 'Total',
|
||
label: {
|
||
show: true,
|
||
position: 'inside',
|
||
formatter: (params) => params.data.name,
|
||
color: 'white',
|
||
fontSize: 14,
|
||
fontWeight: 'bold',
|
||
borderRadius: 4,
|
||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||
padding: [2, 8, 2, 8]
|
||
},
|
||
itemStyle: {
|
||
color: (params) => {
|
||
const colors = {
|
||
'心率': '#FF6B6B',
|
||
'血压': '#4ECDC4',
|
||
'血氧': '#45B7D1'
|
||
};
|
||
return colors[params.data.name] || '#999';
|
||
},
|
||
barBorderRadius: 4
|
||
},
|
||
data: [
|
||
{ value: 5, name: '心率' },
|
||
{ value: 5, name: '血压' },
|
||
{ value: 5, name: '血氧' }
|
||
]
|
||
}
|
||
]
|
||
};
|
||
chart2.setOption(option)
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
const projectList = ref([])
|
||
const sectionList = ref([])
|
||
const projectState = ref('')
|
||
const sectionState = ref('')
|
||
const laborTeamList = ref([])
|
||
const laborTeamState = ref('')
|
||
const exceptionState = ref('')
|
||
const exceptionList = ref([])
|
||
|
||
|
||
const tableLoading = ref(false)
|
||
const tableHeight = ref('55vh')
|
||
const size = ref('default')
|
||
const tableRef = ref(null)
|
||
const currentPage = ref(1)
|
||
const pageSize = ref(30)
|
||
const pageSizes = ref([30, 50, 100])
|
||
const background = ref(true)
|
||
const disabled = ref(false)
|
||
const tableData = ref([
|
||
{ A1: '项目1', A2: '标段1', A3: '劳务队1', A4: '张三', A5: '男', A6: '20', A7: '血压异常', A8: '145/95', A9: '2025-06-10 10:10:10' },
|
||
{ A1: '项目2', A2: '标段2', A3: '劳务队2', A4: '李四', A5: '男', A6: '20', A7: '血氧异常', A8: '98', A9: '2025-06-10 10:10:10' },
|
||
{ A1: '项目3', A2: '标段3', A3: '劳务队3', A4: '王五', A5: '男', A6: '20', A7: '心率异常', A8: '78', A9: '2025-06-10 10:10:10' },
|
||
])
|
||
|
||
const handleCurrentChange = () => { }
|
||
const handleSizeChange = () => { }
|
||
|
||
const onSearch = () => { }
|
||
const onExport = () => { }
|
||
|
||
|
||
|
||
onMounted(() => {
|
||
renderChart1()
|
||
renderChart2()
|
||
})
|
||
</script> |