1
This commit is contained in:
parent
57c33605ae
commit
f618ccb65c
@ -8,7 +8,10 @@ type TAxiosOption = {
|
||||
baseURL: string;
|
||||
}
|
||||
|
||||
const baseURL = 'http://yfyd.hschool.com.cn' // 设置基础URL前缀
|
||||
//const baseURL = 'http://yfyd.hschool.com.cn' // 设置基础URL前缀
|
||||
const baseURL="/api";
|
||||
|
||||
|
||||
|
||||
const config: TAxiosOption = {
|
||||
timeout: 5000,
|
||||
|
||||
@ -76,7 +76,7 @@ export default [
|
||||
{
|
||||
path: '/complaint/index',
|
||||
name: 'Complaint',
|
||||
component: () => import('../../views/home/index.vue'),
|
||||
component: () => import('../../views/complaint/index.vue'),
|
||||
meta: { title: '投诉管理', requireAuth: true, closable: true },
|
||||
},
|
||||
]
|
||||
@ -214,22 +214,22 @@ export default [
|
||||
},{
|
||||
path: '/census/day',
|
||||
name: 'censusDay',
|
||||
component: () => import('../../views/day_evaluation/examine.vue'),
|
||||
component: () => import('../../views/census/day.vue'),
|
||||
meta: {title: '日常考评报表统计', requireAuth: true, closable: true},
|
||||
},{
|
||||
path: '/census/month',
|
||||
name: 'censusMonth',
|
||||
component: () => import('../../views/day_evaluation/examine.vue'),
|
||||
component: () => import('../../views/census/month.vue'),
|
||||
meta: {title: '月度考评报表统计', requireAuth: true, closable: true},
|
||||
},{
|
||||
path: '/census/season',
|
||||
name: 'censusSeason',
|
||||
component: () => import('../../views/day_evaluation/examine.vue'),
|
||||
component: () => import('../../views/census/season.vue'),
|
||||
meta: {title: '季度考评报表统计', requireAuth: true, closable: true},
|
||||
},{
|
||||
path: '/census/year',
|
||||
name: 'censusYear',
|
||||
component: () => import('../../views/day_evaluation/examine.vue'),
|
||||
component: () => import('../../views/census/year.vue'),
|
||||
meta: {title: '年度考评报表统计', requireAuth: true, closable: true},
|
||||
}
|
||||
]
|
||||
@ -242,7 +242,7 @@ export default [
|
||||
{
|
||||
path: '/configuration/index',
|
||||
name: 'configurationIndex',
|
||||
component: () => import('../../views/day_evaluation/index.vue'),
|
||||
component: () => import('../../views/configuration/index.vue'),
|
||||
meta: {title: '登陆日志管理', requireAuth: true, closable: true},
|
||||
},{
|
||||
path: '/configuration/foundation',
|
||||
@ -262,18 +262,13 @@ export default [
|
||||
},{
|
||||
path: '/configuration/level',
|
||||
name: 'configurationLevel',
|
||||
component: () => import('../../views/day_evaluation/examine.vue'),
|
||||
component: () => import('../../views/configuration/level.vue'),
|
||||
meta: {title: '考评级别管理', requireAuth: true, closable: true},
|
||||
},{
|
||||
path: '/configuration/opinion',
|
||||
name: 'configurationOpinion',
|
||||
component: () => import('../../views/day_evaluation/examine.vue'),
|
||||
component: () => import('../../views/configuration/opinion.vue'),
|
||||
meta: {title: '医德征求意见管理', requireAuth: true, closable: true},
|
||||
},{
|
||||
path: '/configuration/year',
|
||||
name: 'configurationBase',
|
||||
component: () => import('../../views/day_evaluation/examine.vue'),
|
||||
meta: {title: '字典管理', requireAuth: true, closable: true},
|
||||
}
|
||||
]
|
||||
},{
|
||||
|
||||
414
src/views/census/day.vue
Normal file
414
src/views/census/day.vue
Normal file
@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<lay-container :fluid="true" style="padding: 20px">
|
||||
<lay-row :space="10">
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<lay-form style="margin-top: 20px">
|
||||
<lay-row>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="月度：" label-width="80">
|
||||
<lay-date-picker type="yearmonth" v-model="yearmonth" placeholder="月度" />
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="4">
|
||||
<lay-form-item label-width="0">
|
||||
<lay-button type="primary" @click="toSearch">查询</lay-button>
|
||||
<lay-button @click="toReset" style="margin-left: 10px">重置</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<template #title>
|
||||
<div style="font-size: 20px;font-weight: 600;color: #333;">月度考评填报 - 分数统计</div>
|
||||
</template>
|
||||
<div id="main" ref="mainRef"></div>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<template #title>
|
||||
<div style="font-size: 20px;font-weight: 600;color: #333;">月度考评报表 - 已参评人数统计</div>
|
||||
</template>
|
||||
<div id="barChart" ref="barChartRef"></div>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const mainRef = ref()
|
||||
const barChartRef = ref()
|
||||
const yearmonth = ref('')
|
||||
|
||||
// 查询方法
|
||||
const toSearch = () => {
|
||||
console.log('查询月度:', yearmonth.value)
|
||||
// TODO: 这里可以根据月度重新获取数据并刷新图表
|
||||
initChart()
|
||||
initBarChart()
|
||||
}
|
||||
|
||||
// 重置方法
|
||||
const toReset = () => {
|
||||
yearmonth.value = ''
|
||||
// TODO: 重置后可以重新加载默认数据
|
||||
initChart()
|
||||
initBarChart()
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
const chartDom = mainRef.value
|
||||
// @ts-ignore
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
const color = [
|
||||
'#0090FF',
|
||||
'#36CE9E',
|
||||
'#FFC005',
|
||||
'#FF515A',
|
||||
'#8B5CFF',
|
||||
'#00CA69'
|
||||
]
|
||||
|
||||
const echartData = [
|
||||
{
|
||||
name: '内科',
|
||||
value1: 94,
|
||||
value2: 91
|
||||
},
|
||||
{
|
||||
name: '外科',
|
||||
value1: 93,
|
||||
value2: 90
|
||||
},
|
||||
{
|
||||
name: '儿科',
|
||||
value1: 95,
|
||||
value2: 92
|
||||
},
|
||||
{
|
||||
name: '妇产科',
|
||||
value1: 92,
|
||||
value2: 89
|
||||
},
|
||||
{
|
||||
name: '急诊科',
|
||||
value1: 91,
|
||||
value2: 88
|
||||
},
|
||||
{
|
||||
name: '骨科',
|
||||
value1: 93,
|
||||
value2: 91
|
||||
},
|
||||
{
|
||||
name: '眼科',
|
||||
value1: 94,
|
||||
value2: 90
|
||||
},
|
||||
{
|
||||
name: '口腔科',
|
||||
value1: 92,
|
||||
value2: 89
|
||||
}
|
||||
]
|
||||
|
||||
const xAxisData = echartData.map((v) => v.name)
|
||||
const yAxisData1 = echartData.map((v) => v.value1)
|
||||
const yAxisData2 = echartData.map((v) => v.value2)
|
||||
|
||||
const hexToRgba = (hex: string, opacity: number) => {
|
||||
let rgbaColor = ''
|
||||
let reg = /^#[\da-f]{6}$/i
|
||||
if (reg.test(hex)) {
|
||||
rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
|
||||
'0x' + hex.slice(3, 5)
|
||||
)},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
|
||||
}
|
||||
return rgbaColor
|
||||
}
|
||||
|
||||
const option = {
|
||||
color: color,
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 10,
|
||||
data: ['合计自评平均分', '合计科室平均分']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params: any) {
|
||||
return `<div style="font-weight: 600;font-size: 14px;color: #333;margin-bottom: 8px">
|
||||
${params[0].name}
|
||||
</div>
|
||||
<div style="color: #666;font-size: 13px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[0]};"></span>
|
||||
合计自评平均分：
|
||||
<span style="color:${color[0]};font-weight:700;font-size: 14px">${params[0].value}</span>
|
||||
分
|
||||
</div>
|
||||
<div style="color: #666;font-size: 13px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[1]};"></span>
|
||||
合计科室平均分：
|
||||
<span style="color:${color[1]};font-weight:700;font-size: 14px">${params[1].value}</span>
|
||||
分
|
||||
</div>`
|
||||
},
|
||||
extraCssText: 'background: #fff; border-radius: 4px; padding: 8px 12px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);color: #333;',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#ccc',
|
||||
width: 1,
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
x: '50px',
|
||||
y: '50px',
|
||||
x2: '50px',
|
||||
y2: '50px'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#D9D9D9'
|
||||
}
|
||||
},
|
||||
data: xAxisData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
min: 80,
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
fontSize: 12,
|
||||
lineHeight: 40
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E9E9E9'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '合计自评平均分',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[0], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[0], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[0], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: yAxisData1
|
||||
},
|
||||
{
|
||||
name: '合计科室平均分',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[1],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[1], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[1], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[1], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[1], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: yAxisData2
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
|
||||
// 初始化柱状图
|
||||
const initBarChart = () => {
|
||||
const chartDom = barChartRef.value
|
||||
// @ts-ignore
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
const barData = [
|
||||
{ name: '内科', value: 45 },
|
||||
{ name: '外科', value: 38 },
|
||||
{ name: '儿科', value: 25 },
|
||||
{ name: '妇产科', value: 32 },
|
||||
{ name: '急诊科', value: 28 },
|
||||
{ name: '骨科', value: 22 },
|
||||
{ name: '眼科', value: 18 },
|
||||
{ name: '口腔科', value: 20 }
|
||||
]
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function(params: any) {
|
||||
return `${params[0].name}<br/>已参评人数：${params[0].value}人`
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: barData.map(item => item.name),
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '人数',
|
||||
axisLabel: {
|
||||
color: '#333'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E9E9E9'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '已参评人数',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: barData.map(item => item.value),
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
initBarChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#main, #barChart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
414
src/views/census/month.vue
Normal file
414
src/views/census/month.vue
Normal file
@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<lay-container :fluid="true" style="padding: 20px">
|
||||
<lay-row :space="10">
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<lay-form style="margin-top: 20px">
|
||||
<lay-row>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="月度：" label-width="80">
|
||||
<lay-date-picker type="yearmonth" v-model="yearmonth" placeholder="月度" />
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="4">
|
||||
<lay-form-item label-width="0">
|
||||
<lay-button type="primary" @click="toSearch">查询</lay-button>
|
||||
<lay-button @click="toReset" style="margin-left: 10px">重置</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<template #title>
|
||||
<div style="font-size: 20px;font-weight: 600;color: #333;">月度考评填报 - 分数统计</div>
|
||||
</template>
|
||||
<div id="main" ref="mainRef"></div>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<template #title>
|
||||
<div style="font-size: 20px;font-weight: 600;color: #333;">月度考评报表 - 已参评人数统计</div>
|
||||
</template>
|
||||
<div id="barChart" ref="barChartRef"></div>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const mainRef = ref()
|
||||
const barChartRef = ref()
|
||||
const yearmonth = ref('')
|
||||
|
||||
// 查询方法
|
||||
const toSearch = () => {
|
||||
console.log('查询月度:', yearmonth.value)
|
||||
// TODO: 这里可以根据月度重新获取数据并刷新图表
|
||||
initChart()
|
||||
initBarChart()
|
||||
}
|
||||
|
||||
// 重置方法
|
||||
const toReset = () => {
|
||||
yearmonth.value = ''
|
||||
// TODO: 重置后可以重新加载默认数据
|
||||
initChart()
|
||||
initBarChart()
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
const chartDom = mainRef.value
|
||||
// @ts-ignore
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
const color = [
|
||||
'#0090FF',
|
||||
'#36CE9E',
|
||||
'#FFC005',
|
||||
'#FF515A',
|
||||
'#8B5CFF',
|
||||
'#00CA69'
|
||||
]
|
||||
|
||||
const echartData = [
|
||||
{
|
||||
name: '内科',
|
||||
value1: 94,
|
||||
value2: 91
|
||||
},
|
||||
{
|
||||
name: '外科',
|
||||
value1: 93,
|
||||
value2: 90
|
||||
},
|
||||
{
|
||||
name: '儿科',
|
||||
value1: 95,
|
||||
value2: 92
|
||||
},
|
||||
{
|
||||
name: '妇产科',
|
||||
value1: 92,
|
||||
value2: 89
|
||||
},
|
||||
{
|
||||
name: '急诊科',
|
||||
value1: 91,
|
||||
value2: 88
|
||||
},
|
||||
{
|
||||
name: '骨科',
|
||||
value1: 93,
|
||||
value2: 91
|
||||
},
|
||||
{
|
||||
name: '眼科',
|
||||
value1: 94,
|
||||
value2: 90
|
||||
},
|
||||
{
|
||||
name: '口腔科',
|
||||
value1: 92,
|
||||
value2: 89
|
||||
}
|
||||
]
|
||||
|
||||
const xAxisData = echartData.map((v) => v.name)
|
||||
const yAxisData1 = echartData.map((v) => v.value1)
|
||||
const yAxisData2 = echartData.map((v) => v.value2)
|
||||
|
||||
const hexToRgba = (hex: string, opacity: number) => {
|
||||
let rgbaColor = ''
|
||||
let reg = /^#[\da-f]{6}$/i
|
||||
if (reg.test(hex)) {
|
||||
rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
|
||||
'0x' + hex.slice(3, 5)
|
||||
)},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
|
||||
}
|
||||
return rgbaColor
|
||||
}
|
||||
|
||||
const option = {
|
||||
color: color,
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 10,
|
||||
data: ['合计自评平均分', '合计科室平均分']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params: any) {
|
||||
return `<div style="font-weight: 600;font-size: 14px;color: #333;margin-bottom: 8px">
|
||||
${params[0].name}
|
||||
</div>
|
||||
<div style="color: #666;font-size: 13px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[0]};"></span>
|
||||
合计自评平均分：
|
||||
<span style="color:${color[0]};font-weight:700;font-size: 14px">${params[0].value}</span>
|
||||
分
|
||||
</div>
|
||||
<div style="color: #666;font-size: 13px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[1]};"></span>
|
||||
合计科室平均分：
|
||||
<span style="color:${color[1]};font-weight:700;font-size: 14px">${params[1].value}</span>
|
||||
分
|
||||
</div>`
|
||||
},
|
||||
extraCssText: 'background: #fff; border-radius: 4px; padding: 8px 12px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);color: #333;',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#ccc',
|
||||
width: 1,
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
x: '50px',
|
||||
y: '50px',
|
||||
x2: '50px',
|
||||
y2: '50px'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#D9D9D9'
|
||||
}
|
||||
},
|
||||
data: xAxisData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
min: 80,
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
fontSize: 12,
|
||||
lineHeight: 40
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E9E9E9'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '合计自评平均分',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[0], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[0], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[0], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: yAxisData1
|
||||
},
|
||||
{
|
||||
name: '合计科室平均分',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[1],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[1], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[1], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[1], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[1], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: yAxisData2
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
|
||||
// 初始化柱状图
|
||||
const initBarChart = () => {
|
||||
const chartDom = barChartRef.value
|
||||
// @ts-ignore
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
const barData = [
|
||||
{ name: '内科', value: 45 },
|
||||
{ name: '外科', value: 38 },
|
||||
{ name: '儿科', value: 25 },
|
||||
{ name: '妇产科', value: 32 },
|
||||
{ name: '急诊科', value: 28 },
|
||||
{ name: '骨科', value: 22 },
|
||||
{ name: '眼科', value: 18 },
|
||||
{ name: '口腔科', value: 20 }
|
||||
]
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function(params: any) {
|
||||
return `${params[0].name}<br/>已参评人数：${params[0].value}人`
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: barData.map(item => item.name),
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '人数',
|
||||
axisLabel: {
|
||||
color: '#333'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E9E9E9'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '已参评人数',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: barData.map(item => item.value),
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
initBarChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#main, #barChart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
426
src/views/census/season.vue
Normal file
426
src/views/census/season.vue
Normal file
@ -0,0 +1,426 @@
|
||||
<template>
|
||||
<lay-container :fluid="true" style="padding: 20px">
|
||||
<lay-row :space="10">
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<lay-form style="margin-top: 20px">
|
||||
<lay-row>
|
||||
<lay-col :md="3">
|
||||
<lay-form-item label="年：" label-width="80">
|
||||
<lay-date-picker style="width: 130px;" type="yearmonth" v-model="yearmonth"
|
||||
placeholder="年" />
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="3">
|
||||
<lay-form-item label="季：" label-width="120">
|
||||
<lay-select v-model="quarter" placeholder="请选择" style="width: 120px;">
|
||||
<lay-select-option :value="1" label="第一季度"></lay-select-option>
|
||||
<lay-select-option :value="2" label="第二季度"></lay-select-option>
|
||||
<lay-select-option :value="3" label="第三季度"></lay-select-option>
|
||||
<lay-select-option :value="4" label="第四季度"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="4">
|
||||
<lay-form-item label-width="0">
|
||||
<lay-button type="primary" @click="toSearch">查询</lay-button>
|
||||
<lay-button @click="toReset" style="margin-left: 10px">重置</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<template #title>
|
||||
<div style="font-size: 20px;font-weight: 600;color: #333;">季度考评填报 - 分数统计</div>
|
||||
</template>
|
||||
<div id="main" ref="mainRef"></div>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<template #title>
|
||||
<div style="font-size: 20px;font-weight: 600;color: #333;">季度考评报表 - 已参评人数统计</div>
|
||||
</template>
|
||||
<div id="barChart" ref="barChartRef"></div>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const mainRef = ref()
|
||||
const barChartRef = ref()
|
||||
const yearmonth = ref('')
|
||||
const quarter = ref(1)
|
||||
// 查询方法
|
||||
const toSearch = () => {
|
||||
console.log('查询月度:', yearmonth.value)
|
||||
// TODO: 这里可以根据月度重新获取数据并刷新图表
|
||||
initChart()
|
||||
initBarChart()
|
||||
}
|
||||
|
||||
// 重置方法
|
||||
const toReset = () => {
|
||||
yearmonth.value = ''
|
||||
// TODO: 重置后可以重新加载默认数据
|
||||
initChart()
|
||||
initBarChart()
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
const chartDom = mainRef.value
|
||||
// @ts-ignore
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
const color = [
|
||||
'#0090FF',
|
||||
'#36CE9E',
|
||||
'#FFC005',
|
||||
'#FF515A',
|
||||
'#8B5CFF',
|
||||
'#00CA69'
|
||||
]
|
||||
|
||||
const echartData = [
|
||||
{
|
||||
name: '内科',
|
||||
value1: 94,
|
||||
value2: 91
|
||||
},
|
||||
{
|
||||
name: '外科',
|
||||
value1: 93,
|
||||
value2: 90
|
||||
},
|
||||
{
|
||||
name: '儿科',
|
||||
value1: 95,
|
||||
value2: 92
|
||||
},
|
||||
{
|
||||
name: '妇产科',
|
||||
value1: 92,
|
||||
value2: 89
|
||||
},
|
||||
{
|
||||
name: '急诊科',
|
||||
value1: 91,
|
||||
value2: 88
|
||||
},
|
||||
{
|
||||
name: '骨科',
|
||||
value1: 93,
|
||||
value2: 91
|
||||
},
|
||||
{
|
||||
name: '眼科',
|
||||
value1: 94,
|
||||
value2: 90
|
||||
},
|
||||
{
|
||||
name: '口腔科',
|
||||
value1: 92,
|
||||
value2: 89
|
||||
}
|
||||
]
|
||||
|
||||
const xAxisData = echartData.map((v) => v.name)
|
||||
const yAxisData1 = echartData.map((v) => v.value1)
|
||||
const yAxisData2 = echartData.map((v) => v.value2)
|
||||
|
||||
const hexToRgba = (hex: string, opacity: number) => {
|
||||
let rgbaColor = ''
|
||||
let reg = /^#[\da-f]{6}$/i
|
||||
if (reg.test(hex)) {
|
||||
rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
|
||||
'0x' + hex.slice(3, 5)
|
||||
)},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
|
||||
}
|
||||
return rgbaColor
|
||||
}
|
||||
|
||||
const option = {
|
||||
color: color,
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 10,
|
||||
data: ['合计自评平均分', '合计科室平均分']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params: any) {
|
||||
return `<div style="font-weight: 600;font-size: 14px;color: #333;margin-bottom: 8px">
|
||||
${params[0].name}
|
||||
</div>
|
||||
<div style="color: #666;font-size: 13px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[0]};"></span>
|
||||
合计自评平均分：
|
||||
<span style="color:${color[0]};font-weight:700;font-size: 14px">${params[0].value}</span>
|
||||
分
|
||||
</div>
|
||||
<div style="color: #666;font-size: 13px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[1]};"></span>
|
||||
合计科室平均分：
|
||||
<span style="color:${color[1]};font-weight:700;font-size: 14px">${params[1].value}</span>
|
||||
分
|
||||
</div>`
|
||||
},
|
||||
extraCssText: 'background: #fff; border-radius: 4px; padding: 8px 12px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);color: #333;',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#ccc',
|
||||
width: 1,
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
x: '50px',
|
||||
y: '50px',
|
||||
x2: '50px',
|
||||
y2: '50px'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#D9D9D9'
|
||||
}
|
||||
},
|
||||
data: xAxisData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
min: 80,
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
fontSize: 12,
|
||||
lineHeight: 40
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E9E9E9'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '合计自评平均分',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[0], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[0], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[0], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: yAxisData1
|
||||
},
|
||||
{
|
||||
name: '合计科室平均分',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[1],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[1], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[1], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[1], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[1], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: yAxisData2
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
|
||||
// 初始化柱状图
|
||||
const initBarChart = () => {
|
||||
const chartDom = barChartRef.value
|
||||
// @ts-ignore
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
const barData = [
|
||||
{ name: '内科', value: 45 },
|
||||
{ name: '外科', value: 38 },
|
||||
{ name: '儿科', value: 25 },
|
||||
{ name: '妇产科', value: 32 },
|
||||
{ name: '急诊科', value: 28 },
|
||||
{ name: '骨科', value: 22 },
|
||||
{ name: '眼科', value: 18 },
|
||||
{ name: '口腔科', value: 20 }
|
||||
]
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
return `${params[0].name}<br/>已参评人数：${params[0].value}人`
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: barData.map(item => item.name),
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '人数',
|
||||
axisLabel: {
|
||||
color: '#333'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E9E9E9'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '已参评人数',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: barData.map(item => item.value),
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
initBarChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#main,
|
||||
#barChart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
414
src/views/census/year.vue
Normal file
414
src/views/census/year.vue
Normal file
@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<lay-container :fluid="true" style="padding: 20px">
|
||||
<lay-row :space="10">
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<lay-form style="margin-top: 20px">
|
||||
<lay-row>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="年度：" label-width="80">
|
||||
<lay-date-picker type="year" v-model="yearmonth" placeholder="年度" />
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="4">
|
||||
<lay-form-item label-width="0">
|
||||
<lay-button type="primary" @click="toSearch">查询</lay-button>
|
||||
<lay-button @click="toReset" style="margin-left: 10px">重置</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<template #title>
|
||||
<div style="font-size: 20px;font-weight: 600;color: #333;">年度考评填报 - 分数统计</div>
|
||||
</template>
|
||||
<div id="main" ref="mainRef"></div>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<template #title>
|
||||
<div style="font-size: 20px;font-weight: 600;color: #333;">年度考评报表 - 已参评人数统计</div>
|
||||
</template>
|
||||
<div id="barChart" ref="barChartRef"></div>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
const mainRef = ref()
|
||||
const barChartRef = ref()
|
||||
const yearmonth = ref('')
|
||||
|
||||
// 查询方法
|
||||
const toSearch = () => {
|
||||
console.log('查询月度:', yearmonth.value)
|
||||
// TODO: 这里可以根据月度重新获取数据并刷新图表
|
||||
initChart()
|
||||
initBarChart()
|
||||
}
|
||||
|
||||
// 重置方法
|
||||
const toReset = () => {
|
||||
yearmonth.value = ''
|
||||
// TODO: 重置后可以重新加载默认数据
|
||||
initChart()
|
||||
initBarChart()
|
||||
}
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
const chartDom = mainRef.value
|
||||
// @ts-ignore
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
const color = [
|
||||
'#0090FF',
|
||||
'#36CE9E',
|
||||
'#FFC005',
|
||||
'#FF515A',
|
||||
'#8B5CFF',
|
||||
'#00CA69'
|
||||
]
|
||||
|
||||
const echartData = [
|
||||
{
|
||||
name: '内科',
|
||||
value1: 94,
|
||||
value2: 91
|
||||
},
|
||||
{
|
||||
name: '外科',
|
||||
value1: 93,
|
||||
value2: 90
|
||||
},
|
||||
{
|
||||
name: '儿科',
|
||||
value1: 95,
|
||||
value2: 92
|
||||
},
|
||||
{
|
||||
name: '妇产科',
|
||||
value1: 92,
|
||||
value2: 89
|
||||
},
|
||||
{
|
||||
name: '急诊科',
|
||||
value1: 91,
|
||||
value2: 88
|
||||
},
|
||||
{
|
||||
name: '骨科',
|
||||
value1: 93,
|
||||
value2: 91
|
||||
},
|
||||
{
|
||||
name: '眼科',
|
||||
value1: 94,
|
||||
value2: 90
|
||||
},
|
||||
{
|
||||
name: '口腔科',
|
||||
value1: 92,
|
||||
value2: 89
|
||||
}
|
||||
]
|
||||
|
||||
const xAxisData = echartData.map((v) => v.name)
|
||||
const yAxisData1 = echartData.map((v) => v.value1)
|
||||
const yAxisData2 = echartData.map((v) => v.value2)
|
||||
|
||||
const hexToRgba = (hex: string, opacity: number) => {
|
||||
let rgbaColor = ''
|
||||
let reg = /^#[\da-f]{6}$/i
|
||||
if (reg.test(hex)) {
|
||||
rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt(
|
||||
'0x' + hex.slice(3, 5)
|
||||
)},${parseInt('0x' + hex.slice(5, 7))},${opacity})`
|
||||
}
|
||||
return rgbaColor
|
||||
}
|
||||
|
||||
const option = {
|
||||
color: color,
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 10,
|
||||
data: ['合计自评平均分', '合计科室平均分']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params: any) {
|
||||
return `<div style="font-weight: 600;font-size: 14px;color: #333;margin-bottom: 8px">
|
||||
${params[0].name}
|
||||
</div>
|
||||
<div style="color: #666;font-size: 13px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[0]};"></span>
|
||||
合计自评平均分：
|
||||
<span style="color:${color[0]};font-weight:700;font-size: 14px">${params[0].value}</span>
|
||||
分
|
||||
</div>
|
||||
<div style="color: #666;font-size: 13px;line-height: 24px">
|
||||
<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[1]};"></span>
|
||||
合计科室平均分：
|
||||
<span style="color:${color[1]};font-weight:700;font-size: 14px">${params[1].value}</span>
|
||||
分
|
||||
</div>`
|
||||
},
|
||||
extraCssText: 'background: #fff; border-radius: 4px; padding: 8px 12px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);color: #333;',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#ccc',
|
||||
width: 1,
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
x: '50px',
|
||||
y: '50px',
|
||||
x2: '50px',
|
||||
y2: '50px'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#333'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#D9D9D9'
|
||||
}
|
||||
},
|
||||
data: xAxisData
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
min: 80,
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#666',
|
||||
fontSize: 12,
|
||||
lineHeight: 40
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E9E9E9'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '合计自评平均分',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[0],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[0], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[0], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[0], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[0], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: yAxisData1
|
||||
},
|
||||
{
|
||||
name: '合计科室平均分',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 8,
|
||||
zlevel: 3,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: color[1],
|
||||
shadowBlur: 3,
|
||||
shadowColor: hexToRgba(color[1], 0.5),
|
||||
shadowOffsetY: 8
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(color[1], 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: hexToRgba(color[1], 0.1)
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: hexToRgba(color[1], 0.1),
|
||||
shadowBlur: 10
|
||||
}
|
||||
},
|
||||
data: yAxisData2
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
|
||||
// 初始化柱状图
|
||||
const initBarChart = () => {
|
||||
const chartDom = barChartRef.value
|
||||
// @ts-ignore
|
||||
const myChart = echarts.init(chartDom)
|
||||
|
||||
const barData = [
|
||||
{ name: '内科', value: 45 },
|
||||
{ name: '外科', value: 38 },
|
||||
{ name: '儿科', value: 25 },
|
||||
{ name: '妇产科', value: 32 },
|
||||
{ name: '急诊科', value: 28 },
|
||||
{ name: '骨科', value: 22 },
|
||||
{ name: '眼科', value: 18 },
|
||||
{ name: '口腔科', value: 20 }
|
||||
]
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
formatter: function(params: any) {
|
||||
return `${params[0].name}<br/>已参评人数：${params[0].value}人`
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: barData.map(item => item.name),
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '人数',
|
||||
axisLabel: {
|
||||
color: '#333'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E9E9E9'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '已参评人数',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: barData.map(item => item.value),
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#2378f7' },
|
||||
{ offset: 0.7, color: '#2378f7' },
|
||||
{ offset: 1, color: '#83bff6' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
option && myChart.setOption(option)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
initBarChart()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#main, #barChart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
181
src/views/complaint/index.vue
Normal file
181
src/views/complaint/index.vue
Normal file
@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<lay-container fluid="true" style="padding: 20px">
|
||||
<lay-row :space="10">
|
||||
<!-- 搜索区域 -->
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<lay-form style="margin-top: 20px">
|
||||
<lay-row>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="患者姓名：" label-width="80">
|
||||
<lay-input style="width: 220px" v-model="searchQuery.patientName" placeholder="请输入患者姓名"
|
||||
:allow-clear="true">
|
||||
</lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="投诉类型：" label-width="80">
|
||||
<lay-select v-model="searchQuery.complaintType" placeholder="请选择类型" :allow-clear="true">
|
||||
<lay-select-option value="服务态度" label="服务态度"></lay-select-option>
|
||||
<lay-select-option value="医疗质量" label="医疗质量"></lay-select-option>
|
||||
<lay-select-option value="收费问题" label="收费问题"></lay-select-option>
|
||||
<lay-select-option value="其他" label="其他"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="处理状态：" label-width="80">
|
||||
<lay-select v-model="searchQuery.status" placeholder="请选择状态" :allow-clear="true">
|
||||
<lay-select-option value="待处理" label="待处理"></lay-select-option>
|
||||
<lay-select-option value="处理中" label="处理中"></lay-select-option>
|
||||
<lay-select-option value="已处理" label="已处理"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="4">
|
||||
<lay-form-item label-width="0">
|
||||
<lay-button type="primary" @click="toSearch">查询</lay-button>
|
||||
<lay-button @click="toReset" style="margin-left: 10px">重置</lay-button>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
|
||||
<!-- 列表区域 -->
|
||||
<lay-col :md="24">
|
||||
<lay-card>
|
||||
<div style="padding: 10px">
|
||||
<span style="font-size: 18px;vertical-align: center;margin-right: 20px">投诉记录列表</span>
|
||||
<lay-button type="primary" @click="changeVisible11('新增', null)" size="sm">新增投诉</lay-button>
|
||||
</div>
|
||||
<lay-table :height="600" size="lg" :columns="columns" :data-source="dataSource" :page="page" @change="change">
|
||||
<template #status="{ row }">
|
||||
<span v-if="row.status === '待处理'" style="color: #1E9FFF">待处理</span>
|
||||
<span v-if="row.status === '处理中'" style="color: #FFB800">处理中</span>
|
||||
<span v-if="row.status === '已处理'" style="color: #009688">已处理</span>
|
||||
</template>
|
||||
<template v-slot:operator="{ row }">
|
||||
<lay-space size="lg">
|
||||
<span style="color: #00A394;cursor: pointer" @click="changeVisible11('编辑', row)">编辑</span>
|
||||
<lay-popconfirm content="确定要删除此投诉记录吗?" @confirm="confirm" @cancel="cancel">
|
||||
<span style="color: #00A394;cursor: pointer">删除</span>
|
||||
</lay-popconfirm>
|
||||
</lay-space>
|
||||
</template>
|
||||
</lay-table>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { layer } from '@layui/layui-vue'
|
||||
const searchQuery = ref({
|
||||
patientName: '',
|
||||
complaintType: '',
|
||||
status: '',
|
||||
department: ''
|
||||
})
|
||||
function toReset() {
|
||||
searchQuery.value = {
|
||||
patientName: '',
|
||||
complaintType: '',
|
||||
status: '',
|
||||
department: ''
|
||||
}
|
||||
}
|
||||
|
||||
function toSearch() {
|
||||
page.current = 1
|
||||
change(page)
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const page = reactive({ current: 1, limit: 10, total: 100 })
|
||||
const columns = ref([
|
||||
{ title: '编号', width: '90px', key: 'id' },
|
||||
{ title: '患者姓名', width: '120px', key: 'patientName', align: 'center' },
|
||||
{ title: '投诉类型', width: '120px', key: 'complaintType', align: 'center' },
|
||||
{ title: '投诉内容', width: '300px', key: 'content', align: 'center' },
|
||||
{ title: '科室', width: '120px', key: 'department', align: 'center' },
|
||||
{ title: '相关医生', width: '120px', key: 'doctorName', align: 'center' },
|
||||
{ title: '投诉时间', width: '160px', key: 'complaintTime', align: 'center' },
|
||||
{ title: '处理状态', width: '120px', key: 'status', align: 'center', customSlot: 'status' },
|
||||
{ title: '处理结果', width: '300px', key: 'result', align: 'center' },
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
customSlot: 'operator',
|
||||
key: 'operator',
|
||||
fixed: 'right',
|
||||
align: 'center'
|
||||
}
|
||||
])
|
||||
const change = (page: any) => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
dataSource.value = loadDataSource(page.current, page.limit)
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
}
|
||||
const dataSource = ref([
|
||||
{
|
||||
id: '1',
|
||||
patientName: '张三',
|
||||
complaintType: '服务态度',
|
||||
content: '医生服务态度不好，说话很不耐烦',
|
||||
department: '内科',
|
||||
doctorName: '李医生',
|
||||
complaintTime: '2024-03-20 09:34:56',
|
||||
status: '待处理',
|
||||
result: ''
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
patientName: '李四',
|
||||
complaintType: '医疗质量',
|
||||
content: '开的药物对症状没有改善',
|
||||
department: '外科',
|
||||
doctorName: '王医生',
|
||||
complaintTime: '2024-03-19 15:24:31',
|
||||
status: '已处理',
|
||||
result: '已与患者沟通,重新进行诊断并调整用药方案'
|
||||
}
|
||||
])
|
||||
const loadDataSource = (page: number, pageSize: number) => {
|
||||
var response = []
|
||||
var startIndex = (page - 1) * pageSize + 1
|
||||
var endIndex = page * pageSize
|
||||
for (var i = startIndex; i <= endIndex; i++) {
|
||||
response.push({
|
||||
id: `${i}`,
|
||||
patientName: `患者${i}`,
|
||||
complaintType: '服务态度',
|
||||
content: '医生服务态度不好，说话很不耐烦',
|
||||
department: '内科',
|
||||
doctorName: '李医生',
|
||||
complaintTime: '2024-03-20 09:34:56',
|
||||
status: '待处理',
|
||||
result: ''
|
||||
})
|
||||
}
|
||||
return response
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.layui-table-header .layui-table-cell {
|
||||
background-color: #ECF8FA !important;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
display: inline-block;
|
||||
width: 98%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
102
src/views/configuration/index.vue
Normal file
102
src/views/configuration/index.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<lay-container style="padding: 20px">
|
||||
<lay-card>
|
||||
<div style="padding: 10px">
|
||||
<span style="font-size: 18px;vertical-align: center;margin-right: 20px">登录日志列表</span>
|
||||
</div>
|
||||
<lay-table size="lg" ref="tableRef" :columns="columns" :data-source="dataSource">
|
||||
<template v-slot:login_status="{ data }">
|
||||
<span :style="{ color: data.login_status ? '#67C23A' : '#F56C6C' }">
|
||||
{{ data.login_status ? '成功' : '失败' }}
|
||||
</span>
|
||||
</template>
|
||||
</lay-table>
|
||||
</lay-card>
|
||||
</lay-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { layer } from '@layui/layer-vue'
|
||||
|
||||
// 定义接口类型
|
||||
interface LoginLog {
|
||||
id: number
|
||||
username: string
|
||||
ip_address: string
|
||||
login_time: string
|
||||
login_status: boolean
|
||||
device_info: string
|
||||
}
|
||||
|
||||
// 列表数据
|
||||
const dataSource = ref<LoginLog[]>([])
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: "用户名",
|
||||
width: "150px",
|
||||
key: "username"
|
||||
},
|
||||
{
|
||||
title: "IP地址",
|
||||
width: "150px",
|
||||
key: "ip_address"
|
||||
},
|
||||
{
|
||||
title: "登录时间",
|
||||
width: "180px",
|
||||
key: "login_time"
|
||||
},
|
||||
{
|
||||
title: "登录状态",
|
||||
width: "100px",
|
||||
key: "login_status",
|
||||
customSlot: 'login_status'
|
||||
},
|
||||
{
|
||||
title: "设备信息",
|
||||
width: "300px",
|
||||
key: "device_info"
|
||||
}
|
||||
]
|
||||
|
||||
onMounted(() => {
|
||||
getLoginLogs()
|
||||
})
|
||||
|
||||
// 获取登录日志数据
|
||||
const getLoginLogs = () => {
|
||||
// 这里替换为实际的API调用
|
||||
// getLoginLogList().then((res) => {
|
||||
// if (res.code === 1) {
|
||||
// dataSource.value = res.data
|
||||
// } else {
|
||||
// layer.msg(res.msg, {icon: 2})
|
||||
// }
|
||||
// })
|
||||
|
||||
// 模拟数据
|
||||
dataSource.value = [
|
||||
{
|
||||
id: 1,
|
||||
username: 'admin',
|
||||
ip_address: '192.168.1.100',
|
||||
login_time: '2024-03-20 10:30:45',
|
||||
login_status: true,
|
||||
device_info: 'Chrome 122.0.0.0 / Windows 10'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
username: 'user1',
|
||||
ip_address: '192.168.1.101',
|
||||
login_time: '2024-03-20 09:15:22',
|
||||
login_status: false,
|
||||
device_info: 'Firefox 123.0 / MacOS'
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
519
src/views/configuration/level.vue
Normal file
519
src/views/configuration/level.vue
Normal file
@ -0,0 +1,519 @@
|
||||
<template>
|
||||
<lay-container fluid="true" class="organization-box">
|
||||
<div style="display: flex">
|
||||
<div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
|
||||
<!-- tree -->
|
||||
<div v-show="!isFold">
|
||||
科室列表
|
||||
</div>
|
||||
|
||||
<lay-tree v-show="!isFold" style="margin-top: 10px" :data="data" v-model:selectedKey="selectedKey"
|
||||
:showLine="showLine" :expandKeys="[1, 3, 4]" @node-click="handleClick">
|
||||
<template #title="{ data }">
|
||||
<span :class="selectedKey == data.id ? 'isChecked' : ''">
|
||||
{{ data.title }} {{ data.id }}
|
||||
</span>
|
||||
</template>
|
||||
</lay-tree>
|
||||
<div class="isFold" @click="isFold = !isFold">
|
||||
<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
|
||||
<lay-icon v-else class="layui-icon-right"></lay-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; padding: 10px; over-flow: auto">
|
||||
<!-- table -->
|
||||
<lay-card>
|
||||
<lay-form>
|
||||
<lay-row>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="用户账号" label-width="80">
|
||||
<lay-input v-model="searchQuery.userAccount" placeholder="请输入" size="sm"
|
||||
:allow-clear="true" style="width: 98%"></lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="用户名" label-width="80">
|
||||
<lay-input v-model="searchQuery.userName" placeholder="请输入" size="sm"
|
||||
:allow-clear="true" style="width: 98%"></lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="性别" label-width="80">
|
||||
<lay-select class="search-input" size="sm" v-model="searchQuery.sex"
|
||||
:allow-clear="true" placeholder="请选择">
|
||||
<lay-select-option value="man" label="男"></lay-select-option>
|
||||
<lay-select-option value="woman" label="女"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label-width="20">
|
||||
<lay-button style="margin-left: 20px" type="normal" size="sm" @click="toSearch">
|
||||
查询
|
||||
</lay-button>
|
||||
<lay-button size="sm" @click="toReset"> 重置 </lay-button>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
</lay-card>
|
||||
<lay-table :page="page" :height="'100%'" :columns="columns" :loading="loading" :default-toolbar="true"
|
||||
:data-source="dataSource" v-model:selected-keys="selectedKeys" @change="change"
|
||||
@sortChange="sortChange">
|
||||
<template #status="{ row }">
|
||||
<lay-switch :model-value="row.status" @change="changeStatus($event, row)"></lay-switch>
|
||||
</template>
|
||||
<template #role="{ row }">
|
||||
<lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>
|
||||
</template>
|
||||
|
||||
<template v-slot:toolbar>
|
||||
<lay-button size="sm" type="primary" @click="changeVisible11('新增', null)">新增</lay-button>
|
||||
<lay-button size="sm" @click="toRemove">删除</lay-button>
|
||||
</template>
|
||||
<template v-slot:operator="{ row }">
|
||||
<lay-button size="xs" border="green" border-style="dashed"
|
||||
@click="changeVisible11('编辑', row)">编辑</lay-button>
|
||||
<lay-popconfirm content="确定要删除此用户吗?" @confirm="confirm" @cancel="cancel">
|
||||
<lay-button size="xs" border="red" border-style="dashed">删除</lay-button>
|
||||
</lay-popconfirm>
|
||||
</template>
|
||||
</lay-table>
|
||||
</div>
|
||||
</div>
|
||||
<lay-layer v-model="visible11" :title="title" :area="['500px', '400px']">
|
||||
<div style="padding: 20px">
|
||||
<lay-form :model="model11" ref="layFormRef11" required>
|
||||
<lay-form-item label="所属科室" prop="department">
|
||||
<lay-input v-model="model11.department" disabled></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="级别名称" prop="levelName">
|
||||
<lay-input v-model="model11.levelName"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="名额" prop="quota">
|
||||
<lay-input-number v-model="model11.quota" :min="0"></lay-input-number>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="最高评分" prop="maxScore">
|
||||
<lay-input-number v-model="model11.maxScore" :min="0" :max="100"></lay-input-number>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
<div style="width: 100%; text-align: center">
|
||||
<lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>
|
||||
<lay-button size="sm" @click="toCancel">取消</lay-button>
|
||||
</div>
|
||||
</div>
|
||||
</lay-layer>
|
||||
</lay-container>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { layer } from '@layui/layui-vue'
|
||||
|
||||
const data = ref([
|
||||
{
|
||||
title: '内科',
|
||||
id: 1,
|
||||
children: [
|
||||
{
|
||||
title: '呼吸内科',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
title: '心血管内科',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
title: '消化内科',
|
||||
id: 4,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '外科',
|
||||
id: 5,
|
||||
children: [
|
||||
{
|
||||
title: '普通外科',
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
title: '骨科',
|
||||
id: 7,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '妇产科',
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
title: '儿科',
|
||||
id: 9,
|
||||
}
|
||||
])
|
||||
const showLine = ref(false)
|
||||
const selectedKey = ref('')
|
||||
const selectedNode = ref({
|
||||
id: 0,
|
||||
title: ''
|
||||
})
|
||||
const isFold = ref(false)
|
||||
const searchQuery = ref({
|
||||
userAccount: '',
|
||||
userName: '',
|
||||
sex: ''
|
||||
})
|
||||
function toReset() {
|
||||
searchQuery.value = {
|
||||
userAccount: '',
|
||||
userName: '',
|
||||
sex: ''
|
||||
}
|
||||
}
|
||||
function handleClick(node: any) {
|
||||
selectedNode.value = JSON.parse(JSON.stringify(node))
|
||||
page.current = selectedNode.value.id
|
||||
change(page)
|
||||
}
|
||||
function toAdd() {
|
||||
visible22.value = true
|
||||
}
|
||||
function toEdit() {
|
||||
model22.value = {
|
||||
organization: '1',
|
||||
name: '研发部',
|
||||
fullName: 'xxxx公司-研发部',
|
||||
code: '001',
|
||||
type: '1',
|
||||
sort: 1,
|
||||
remark: '备注'
|
||||
}
|
||||
visible22.value = true
|
||||
}
|
||||
function toDelete() {
|
||||
if (selectedKey.value == '') {
|
||||
layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
|
||||
icon: 3,
|
||||
time: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
layer.confirm(
|
||||
'您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
|
||||
{
|
||||
title: '提示',
|
||||
btn: [
|
||||
{
|
||||
text: '确定',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已成功删除')
|
||||
layer.close(id)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '取消',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已取消操作')
|
||||
layer.close(id)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
function toSearch() {
|
||||
page.current = 1
|
||||
change(page)
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const selectedKeys = ref()
|
||||
const page = reactive({ current: 1, limit: 10, total: 100 })
|
||||
const columns = ref([
|
||||
{ title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
|
||||
{ title: '编号', width: '80px', key: 'id', fixed: 'left' },
|
||||
{ title: '所属科室', width: '120px', key: 'department' },
|
||||
{ title: '级别名称', width: '120px', key: 'levelName' },
|
||||
{ title: '名额', width: '80px', key: 'quota' },
|
||||
{ title: '最高评分', width: '100px', key: 'maxScore' },
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
customSlot: 'operator',
|
||||
key: 'operator',
|
||||
fixed: 'right'
|
||||
}
|
||||
])
|
||||
const change = (page: any) => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
dataSource.value = loadDataSource(page.current, page.limit)
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
}
|
||||
const sortChange = (key: any, sort: number) => {
|
||||
layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
|
||||
}
|
||||
const dataSource = ref([
|
||||
{
|
||||
id: '1',
|
||||
department: '呼吸内科',
|
||||
levelName: 'A级',
|
||||
quota: 3,
|
||||
maxScore: 95
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
department: '呼吸内科',
|
||||
levelName: 'B级',
|
||||
quota: 5,
|
||||
maxScore: 90
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
department: '心血管内科',
|
||||
levelName: 'A级',
|
||||
quota: 2,
|
||||
maxScore: 95
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
department: '心血管内科',
|
||||
levelName: 'B级',
|
||||
quota: 4,
|
||||
maxScore: 90
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
department: '消化内科',
|
||||
levelName: 'A级',
|
||||
quota: 3,
|
||||
maxScore: 95
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
department: '消化内科',
|
||||
levelName: 'B级',
|
||||
quota: 5,
|
||||
maxScore: 90
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
department: '普通外科',
|
||||
levelName: 'A级',
|
||||
quota: 2,
|
||||
maxScore: 95
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
department: '普通外科',
|
||||
levelName: 'B级',
|
||||
quota: 4,
|
||||
maxScore: 90
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
department: '骨科',
|
||||
levelName: 'A级',
|
||||
quota: 2,
|
||||
maxScore: 95
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
department: '骨科',
|
||||
levelName: 'B级',
|
||||
quota: 3,
|
||||
maxScore: 90
|
||||
}
|
||||
])
|
||||
const changeStatus = (isChecked: boolean, row: any) => {
|
||||
dataSource.value.forEach((item) => {
|
||||
if (item.id === row.id) {
|
||||
layer.msg('Success', { icon: 1 }, () => {
|
||||
item.status = isChecked
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const remove = () => {
|
||||
layer.msg(selectedKeys.value, { area: '50%' })
|
||||
}
|
||||
const loadDataSource = (page: number, pageSize: number) => {
|
||||
var response = []
|
||||
var startIndex = (page - 1) * pageSize + 1
|
||||
var endIndex = page * pageSize
|
||||
const levels = ['A级', 'B级', 'C级']
|
||||
for (var i = startIndex; i <= endIndex; i++) {
|
||||
response.push({
|
||||
id: `${i}`,
|
||||
department: selectedNode.value.title || '呼吸内科',
|
||||
levelName: levels[i % 3],
|
||||
quota: Math.floor(Math.random() * 5) + 1, // 1-5的随机数
|
||||
maxScore: 90 + (i % 3) * 5 // 90, 95, 100循环
|
||||
})
|
||||
}
|
||||
return response
|
||||
}
|
||||
const model11 = ref({
|
||||
department: '',
|
||||
levelName: '',
|
||||
quota: 0,
|
||||
maxScore: 0
|
||||
})
|
||||
const layFormRef11 = ref()
|
||||
const visible11 = ref(false)
|
||||
const title = ref('新增')
|
||||
const changeVisible11 = (text: any, row: any) => {
|
||||
title.value = text
|
||||
if (row != null) {
|
||||
let info = JSON.parse(JSON.stringify(row))
|
||||
model11.value = info
|
||||
} else {
|
||||
model11.value = {
|
||||
department: '',
|
||||
levelName: '',
|
||||
quota: 0,
|
||||
maxScore: 0
|
||||
}
|
||||
}
|
||||
visible11.value = !visible11.value
|
||||
}
|
||||
const submit11 = function () {
|
||||
layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '表单提交结果',
|
||||
content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
|
||||
model
|
||||
)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
|
||||
shade: false,
|
||||
isHtmlFragment: true,
|
||||
btn: [
|
||||
{
|
||||
text: '确认',
|
||||
callback(index: any) {
|
||||
layer.close(index)
|
||||
}
|
||||
}
|
||||
],
|
||||
area: '500px'
|
||||
})
|
||||
})
|
||||
}
|
||||
// 清除校验
|
||||
const clearValidate11 = function () {
|
||||
layFormRef11.value.clearValidate()
|
||||
}
|
||||
// 重置表单
|
||||
const reset11 = function () {
|
||||
layFormRef11.value.reset()
|
||||
}
|
||||
function toRemove() {
|
||||
if (selectedKeys.value.length == 0) {
|
||||
layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
|
||||
return
|
||||
}
|
||||
layer.confirm('您将删除所有选中的数据？', {
|
||||
title: '提示',
|
||||
btn: [
|
||||
{
|
||||
text: '确定',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已成功删除')
|
||||
layer.close(id)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '取消',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已取消操作')
|
||||
layer.close(id)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
function toSubmit() {
|
||||
layer.msg('保存成功！', { icon: 1, time: 1000 })
|
||||
visible11.value = false
|
||||
visible22.value = false
|
||||
}
|
||||
function toCancel() {
|
||||
visible11.value = false
|
||||
visible22.value = false
|
||||
}
|
||||
function confirm() {
|
||||
layer.msg('您已成功删除')
|
||||
}
|
||||
function cancel() {
|
||||
layer.msg('您已取消操作')
|
||||
}
|
||||
|
||||
const model22 = ref({
|
||||
organization: '',
|
||||
name: '',
|
||||
fullName: '',
|
||||
code: '',
|
||||
type: '',
|
||||
sort: 0,
|
||||
remark: ''
|
||||
})
|
||||
const layFormRef22 = ref()
|
||||
const visible22 = ref(false)
|
||||
const title22 = ref('新建')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.organization-box {
|
||||
width: calc(100vw - 240px);
|
||||
height: calc(100vh - 110px);
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-tree {
|
||||
display: inline-block;
|
||||
padding: 20px 15px 0 5px;
|
||||
height: 1200px;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* todo layui-tree-entry 设置无效 */
|
||||
.layui-tree-entry {
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.isFold {
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
right: -10px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 13px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
display: inline-block;
|
||||
width: 98%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.isChecked {
|
||||
display: inline-block;
|
||||
background-color: #e8f1ff;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
471
src/views/configuration/opinion.vue
Normal file
471
src/views/configuration/opinion.vue
Normal file
@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<lay-container fluid="true" class="organization-box">
|
||||
<div style="display: flex">
|
||||
<div :style="{ width: isFold ? `0px` : `300px` }" class="left-tree">
|
||||
<div v-show="!isFold">
|
||||
科室列表
|
||||
</div>
|
||||
<lay-tree v-show="!isFold" style="margin-top: 10px" :data="data" v-model:selectedKey="selectedKey"
|
||||
:showLine="showLine" :expandKeys="[1, 3, 4]" @node-click="handleClick">
|
||||
<template #title="{ data }">
|
||||
<span :class="selectedKey == data.id ? 'isChecked' : ''">
|
||||
{{ data.title }} {{ data.id }}
|
||||
</span>
|
||||
</template>
|
||||
</lay-tree>
|
||||
<div class="isFold" @click="isFold = !isFold">
|
||||
<lay-icon v-if="!isFold" class="layui-icon-left"></lay-icon>
|
||||
<lay-icon v-else class="layui-icon-right"></lay-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1; padding: 10px; over-flow: auto">
|
||||
<!-- table -->
|
||||
<lay-card>
|
||||
<lay-form>
|
||||
<lay-row>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="用户账号" label-width="80">
|
||||
<lay-input v-model="searchQuery.userAccount" placeholder="请输入" size="sm"
|
||||
:allow-clear="true" style="width: 98%"></lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="用户名" label-width="80">
|
||||
<lay-input v-model="searchQuery.userName" placeholder="请输入" size="sm"
|
||||
:allow-clear="true" style="width: 98%"></lay-input>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label="性别" label-width="80">
|
||||
<lay-select class="search-input" size="sm" v-model="searchQuery.sex"
|
||||
:allow-clear="true" placeholder="请选择">
|
||||
<lay-select-option value="man" label="男"></lay-select-option>
|
||||
<lay-select-option value="woman" label="女"></lay-select-option>
|
||||
</lay-select>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
<lay-col :md="5">
|
||||
<lay-form-item label-width="20">
|
||||
<lay-button style="margin-left: 20px" type="normal" size="sm" @click="toSearch">
|
||||
查询
|
||||
</lay-button>
|
||||
<lay-button size="sm" @click="toReset"> 重置 </lay-button>
|
||||
</lay-form-item>
|
||||
</lay-col>
|
||||
</lay-row>
|
||||
</lay-form>
|
||||
</lay-card>
|
||||
<lay-table :page="page" :height="'100%'" :columns="columns" :loading="loading" :default-toolbar="true"
|
||||
:data-source="dataSource" v-model:selected-keys="selectedKeys" @change="change"
|
||||
@sortChange="sortChange">
|
||||
<template #status="{ row }">
|
||||
<lay-switch :model-value="row.status" @change="changeStatus($event, row)"></lay-switch>
|
||||
</template>
|
||||
<template #role="{ row }">
|
||||
<lay-tag color="#165DFF" variant="light">{{ row.role }}</lay-tag>
|
||||
</template>
|
||||
|
||||
<template v-slot:toolbar>
|
||||
<lay-button size="sm" type="primary" @click="changeVisible11('新增', null)">新增</lay-button>
|
||||
<lay-button size="sm" @click="toRemove">删除</lay-button>
|
||||
</template>
|
||||
<template v-slot:operator="{ row }">
|
||||
<lay-button size="xs" border="green" border-style="dashed"
|
||||
@click="changeVisible11('编辑', row)">编辑</lay-button>
|
||||
<lay-popconfirm content="确定要删除此用户吗?" @confirm="confirm" @cancel="cancel">
|
||||
<lay-button size="xs" border="red" border-style="dashed">删除</lay-button>
|
||||
</lay-popconfirm>
|
||||
</template>
|
||||
</lay-table>
|
||||
</div>
|
||||
</div>
|
||||
<lay-layer v-model="visible11" :title="title" :area="['500px', '400px']">
|
||||
<div style="padding: 20px">
|
||||
<lay-form :model="model11" ref="layFormRef11" required>
|
||||
<lay-form-item label="部门名称" prop="department">
|
||||
<lay-input v-model="model11.department"></lay-input>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="意见内容" prop="content">
|
||||
<lay-textarea v-model="model11.content" placeholder="请输入意见内容"></lay-textarea>
|
||||
</lay-form-item>
|
||||
<lay-form-item label="是否采纳" prop="status">
|
||||
<lay-switch v-model="model11.status"></lay-switch>
|
||||
</lay-form-item>
|
||||
</lay-form>
|
||||
<div style="width: 100%; text-align: center">
|
||||
<lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>
|
||||
<lay-button size="sm" @click="toCancel">取消</lay-button>
|
||||
</div>
|
||||
</div>
|
||||
</lay-layer>
|
||||
</lay-container>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { layer } from '@layui/layui-vue'
|
||||
|
||||
const data = ref([
|
||||
{
|
||||
title: '内科',
|
||||
id: 1,
|
||||
children: [
|
||||
{
|
||||
title: '呼吸内科',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
title: '心血管内科',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
title: '消化内科',
|
||||
id: 4,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '外科',
|
||||
id: 5,
|
||||
children: [
|
||||
{
|
||||
title: '普通外科',
|
||||
id: 6,
|
||||
},
|
||||
{
|
||||
title: '骨科',
|
||||
id: 7,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '妇产科',
|
||||
id: 8,
|
||||
},
|
||||
{
|
||||
title: '儿科',
|
||||
id: 9,
|
||||
}
|
||||
])
|
||||
const showLine = ref(false)
|
||||
const selectedKey = ref('')
|
||||
const selectedNode = ref({
|
||||
id: 0,
|
||||
title: ''
|
||||
})
|
||||
const isFold = ref(false)
|
||||
const searchQuery = ref({
|
||||
userAccount: '',
|
||||
userName: '',
|
||||
sex: ''
|
||||
})
|
||||
function toReset() {
|
||||
searchQuery.value = {
|
||||
userAccount: '',
|
||||
userName: '',
|
||||
sex: ''
|
||||
}
|
||||
}
|
||||
function handleClick(node: any) {
|
||||
selectedNode.value = JSON.parse(JSON.stringify(node))
|
||||
page.current = selectedNode.value.id
|
||||
change(page)
|
||||
}
|
||||
function toAdd() {
|
||||
visible22.value = true
|
||||
}
|
||||
function toEdit() {
|
||||
model22.value = {
|
||||
organization: '1',
|
||||
name: '研发部',
|
||||
fullName: 'xxxx公司-研发部',
|
||||
code: '001',
|
||||
type: '1',
|
||||
sort: 1,
|
||||
remark: '备注'
|
||||
}
|
||||
visible22.value = true
|
||||
}
|
||||
function toDelete() {
|
||||
if (selectedKey.value == '') {
|
||||
layer.msg('您未选择组织机构，请先选择要删除的组织机构', {
|
||||
icon: 3,
|
||||
time: 2000
|
||||
})
|
||||
return
|
||||
}
|
||||
layer.confirm(
|
||||
'您将删除所选中的组织机构 [ ' + selectedNode.value.title + ' ] ？',
|
||||
{
|
||||
title: '提示',
|
||||
btn: [
|
||||
{
|
||||
text: '确定',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已成功删除')
|
||||
layer.close(id)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '取消',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已取消操作')
|
||||
layer.close(id)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
function toSearch() {
|
||||
page.current = 1
|
||||
change(page)
|
||||
}
|
||||
|
||||
const loading = ref(false)
|
||||
const selectedKeys = ref()
|
||||
const page = reactive({ current: 1, limit: 10, total: 100 })
|
||||
const columns = ref([
|
||||
{ title: '选项', width: '55px', type: 'checkbox', fixed: 'left' },
|
||||
{ title: '编号', width: '80px', key: 'id', fixed: 'left' },
|
||||
{ title: '部门名称', width: '120px', key: 'department' },
|
||||
{ title: '意见内容', width: '300px', key: 'content' },
|
||||
{ title: '是否采纳', width: '100px', customSlot: 'status' },
|
||||
{
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
customSlot: 'operator',
|
||||
key: 'operator',
|
||||
fixed: 'right'
|
||||
}
|
||||
])
|
||||
const change = (page: any) => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
dataSource.value = loadDataSource(page.current, page.limit)
|
||||
loading.value = false
|
||||
}, 1000)
|
||||
}
|
||||
const sortChange = (key: any, sort: number) => {
|
||||
layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
|
||||
}
|
||||
const dataSource = ref([
|
||||
{
|
||||
id: '1',
|
||||
department: '呼吸内科',
|
||||
content: '建议增加呼吸科专业设备配置',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
department: '心血管内科',
|
||||
content: '关于心血管科室人员培训的建议',
|
||||
status: false
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
department: '消化内科',
|
||||
content: '建议增加消化科专业设备配置',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
department: '普通外科',
|
||||
content: '建议增加普通外科专业设备配置',
|
||||
status: false
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
department: '骨科',
|
||||
content: '建议增加骨科专业设备配置',
|
||||
status: true
|
||||
}
|
||||
])
|
||||
const changeStatus = (isChecked: boolean, row: any) => {
|
||||
dataSource.value.forEach((item) => {
|
||||
if (item.id === row.id) {
|
||||
layer.msg('Success', { icon: 1 }, () => {
|
||||
item.status = isChecked
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const remove = () => {
|
||||
layer.msg(selectedKeys.value, { area: '50%' })
|
||||
}
|
||||
const loadDataSource = (page: number, pageSize: number) => {
|
||||
var response = []
|
||||
var startIndex = (page - 1) * pageSize + 1
|
||||
var endIndex = page * pageSize
|
||||
for (var i = startIndex; i <= endIndex; i++) {
|
||||
response.push({
|
||||
id: `${i}`,
|
||||
department: selectedNode.value.title || '呼吸内科',
|
||||
content: `意见内容${i}`,
|
||||
status: i % 2 === 0
|
||||
})
|
||||
}
|
||||
return response
|
||||
}
|
||||
const model11 = ref({
|
||||
id: '',
|
||||
department: '',
|
||||
content: '',
|
||||
status: false
|
||||
})
|
||||
const layFormRef11 = ref()
|
||||
const visible11 = ref(false)
|
||||
const title = ref('新增')
|
||||
const changeVisible11 = (text: any, row: any) => {
|
||||
title.value = text
|
||||
if (row != null) {
|
||||
let info = JSON.parse(JSON.stringify(row))
|
||||
model11.value = info
|
||||
} else {
|
||||
model11.value = {
|
||||
id: '',
|
||||
department: '',
|
||||
content: '',
|
||||
status: false
|
||||
}
|
||||
}
|
||||
visible11.value = !visible11.value
|
||||
}
|
||||
const submit11 = function () {
|
||||
layFormRef11.value.validate((isValidate: any, model: any, errors: any) => {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '表单提交结果',
|
||||
content: `<div style="padding: 10px"><p>是否通过 : ${isValidate}</p> <p>表单数据 : ${JSON.stringify(
|
||||
model
|
||||
)} </p> <p>错误信息 : ${JSON.stringify(errors)}</p></div>`,
|
||||
shade: false,
|
||||
isHtmlFragment: true,
|
||||
btn: [
|
||||
{
|
||||
text: '确认',
|
||||
callback(index: any) {
|
||||
layer.close(index)
|
||||
}
|
||||
}
|
||||
],
|
||||
area: '500px'
|
||||
})
|
||||
})
|
||||
}
|
||||
// 清除校验
|
||||
const clearValidate11 = function () {
|
||||
layFormRef11.value.clearValidate()
|
||||
}
|
||||
// 重置表单
|
||||
const reset11 = function () {
|
||||
layFormRef11.value.reset()
|
||||
}
|
||||
function toRemove() {
|
||||
if (selectedKeys.value.length == 0) {
|
||||
layer.msg('您未选择数据，请先选择要删除的数据', { icon: 3, time: 2000 })
|
||||
return
|
||||
}
|
||||
layer.confirm('您将删除所有选中的数据？', {
|
||||
title: '提示',
|
||||
btn: [
|
||||
{
|
||||
text: '确定',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已成功删除')
|
||||
layer.close(id)
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '取消',
|
||||
callback: (id: any) => {
|
||||
layer.msg('您已取消操作')
|
||||
layer.close(id)
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
function toSubmit() {
|
||||
layer.msg('保存成功！', { icon: 1, time: 1000 })
|
||||
visible11.value = false
|
||||
visible22.value = false
|
||||
}
|
||||
function toCancel() {
|
||||
visible11.value = false
|
||||
visible22.value = false
|
||||
}
|
||||
function confirm() {
|
||||
layer.msg('您已成功删除')
|
||||
}
|
||||
function cancel() {
|
||||
layer.msg('您已取消操作')
|
||||
}
|
||||
|
||||
const model22 = ref({
|
||||
organization: '',
|
||||
name: '',
|
||||
fullName: '',
|
||||
code: '',
|
||||
type: '',
|
||||
sort: 0,
|
||||
remark: ''
|
||||
})
|
||||
const layFormRef22 = ref()
|
||||
const visible22 = ref(false)
|
||||
const title22 = ref('新建')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.organization-box {
|
||||
width: calc(100vw - 240px);
|
||||
height: calc(100vh - 110px);
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-tree {
|
||||
display: inline-block;
|
||||
padding: 20px 15px 0 5px;
|
||||
height: 1200px;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* todo layui-tree-entry 设置无效 */
|
||||
.layui-tree-entry {
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.isFold {
|
||||
position: absolute;
|
||||
top: 36%;
|
||||
right: -10px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
border-radius: 13px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
display: inline-block;
|
||||
width: 98%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.isChecked {
|
||||
display: inline-block;
|
||||
background-color: #e8f1ff;
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -11,7 +11,7 @@
|
||||
<lay-count-up :startVal="0" :endVal="3600" :decimalPlaces="2"></lay-count-up>
|
||||
</div>
|
||||
<template #footer>
|
||||
访问趋势
|
||||
访问趋势1
|
||||
</template>
|
||||
</lay-card>
|
||||
</lay-col>
|
||||
|
||||
@ -20,7 +20,7 @@ export default defineConfig({
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://192.168.10.158/',
|
||||
target: 'http://192.168.10.124/',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user