renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 调整样式·

Browse Source
This commit is contained in:
zk
2024-06-15 15:51:18 +08:00
parent e16b9e054e
commit 0f391ffc22
13 changed files with 243 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/body-d-left/bodyLeftHooks.ts
+97 -17
View File
@@ -152,25 +152,61 @@ export function useHospitalList() {
};
}
const radarChartsTheme = {
dark: {
radarName: {
textStyle: {
color: '#fff',
},
},
splitLine: {
color: '#597589',
},
axisName: {
color: '#ffffff',
},
areaStyle: {
color: '#05D5FF',
},
lineStyle: {
color: '#05D5FF',
},
itemStyle: {
color: '#05D5FF',
},
},
light: {
radarName: {
textStyle: {
color: '#607DDB',
},
},
splitLine: {
color: '#b5c2ef',
},
axisName: {
color: '#607DDB',
},
areaStyle: {
color: '#a0b6fd',
},
lineStyle: {
color: '#607DDB',
},
itemStyle: {
color: '#607DDB',
},
},
};
/**
* @Description:体检医院雷达图
* @date 2023/6/27
* @param indicator:名称及最大值
* @param countList:数据项
*/
export const radarCharts = ({ indicator, countList }) => {
export const radarCharts = ({ indicator, countList, theme }) => {
const { radarName, splitLine, axisName, areaStyle, lineStyle, itemStyle } = radarChartsTheme[theme] || radarChartsTheme.dark;
return {
// tooltip: {
// backgroundColor: 'rgba(50,50,50,0.7)',
// borderColor: 'rgba(50,50,50,0.7)',
// textStyle: {
// color: '#fff',
// },
// //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
// confine: true,
// enterable: true, //鼠标是否可以移动到tooltip区域内
// valueFormatter: (params) => {},
// },
grid: {
top: '1%',
left: '5%',
@@ -184,6 +220,7 @@ export const radarCharts = ({ indicator, countList }) => {
color: '#fff',
fontSize: 14,
},
...radarName,
},
shape: 'polygon',
center: ['50%', '50%'],
@@ -201,6 +238,7 @@ export const radarCharts = ({ indicator, countList }) => {
lineStyle: {
width: 1,
color: '#597589', // 设置网格的颜色
...splitLine,
},
},
indicator: indicator,
@@ -213,6 +251,7 @@ export const radarCharts = ({ indicator, countList }) => {
return `${params}\n${countList[dataIndex]}`;
},
color: '#ffffff',
...axisName,
},
},
polar: {
@@ -252,17 +291,20 @@ export const radarCharts = ({ indicator, countList }) => {
itemStyle: {
normal: {
color: '#05D5FF',
...itemStyle,
},
},
areaStyle: {
normal: {
color: '#05D5FF',
opacity: 0.5,
...areaStyle,
},
},
lineStyle: {
width: 2,
color: '#05D5FF',
...lineStyle,
},
label: {
normal: {
@@ -278,8 +320,44 @@ export const radarCharts = ({ indicator, countList }) => {
],
};
};
const barTheme = {
dark: {
tooltip: {
textStyle: {
color: '#fff',
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#1b7ef2',
},
xAxisLabel: {
color: '#FFFFFF',
},
itemStyle: [
{ offset: 0, color: '#008CFF' },
{ offset: 1, color: '#33CBFE' },
],
},
light: {
tooltip: {
textStyle: {
color: '#768ddb',
},
backgroundColor: '#d5dcf8',
borderColor: '#1b7ef2',
},
xAxisLabel: {
color: '#607DDB',
},
itemStyle: [
{ offset: 0, color: '#607DDB' },
{ offset: 1, color: '#768ddb' },
],
},
};
export function barOption(xData, ydata, theme) {
const { tooltip, xAxisLabel, itemStyle } = barTheme[theme] || barTheme.dark;
export function barOption(xData, ydata) {
function maxCount() {
if (ydata.length) {
return Math.max(...ydata) < 5 ? 5 : null;
@@ -302,6 +380,7 @@ export function barOption(xData, ydata) {
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#1b7ef2',
...tooltip,
},
xAxis: {
type: 'category',
@@ -309,6 +388,7 @@ export function barOption(xData, ydata) {
axisLabel: {
color: '#FFFFFF',
fontSize: 14,
...xAxisLabel,
},
axisLine: {
color: '#bac9e1',
@@ -319,11 +399,13 @@ export function barOption(xData, ydata) {
nameTextStyle: {
color: '#fff',
padding: [0, 0, 0, -15],
...xAxisLabel,
},
type: 'value',
axisLabel: {
color: '#FFFFFF',
fontSize: 14,
...xAxisLabel,
},
splitLine: {
show: true,
@@ -341,10 +423,7 @@ export function barOption(xData, ydata) {
type: 'bar',
barWidth: '20%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#008CFF' },
{ offset: 1, color: '#33CBFE' },
]),
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, itemStyle),
},
barMaxWidth: '10',
label: {
@@ -352,6 +431,7 @@ export function barOption(xData, ydata) {
position: 'top',
color: '#33CBFE',
fontWeight: 'normal',
...xAxisLabel,
},
},
],
src/components/body-d-left/oneL.vue
-4
View File
@@ -34,7 +34,6 @@
import { timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { useDetailStore } from '/@/store/modules/detailData.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
import { setTheme } from '/@/assets/theme/themeList.ts';
import { useTheme } from '/@/hooks/theme/useTheme.ts';
const { themeType } = useTheme();
@@ -59,9 +58,6 @@
onMounted(() => {
getList();
if (props.theme) {
setTheme(props.theme);
}
});
const useDetail = useDetailStore();
src/components/body-d-left/threeL.vue
+11 -10
View File
@@ -1,13 +1,13 @@
<template>
<div class="common-card" :class="[themeType]">
<public-title title="体检数据" />
<public-title title="体检数据" :themeType="themeType" />
<div class="inner">
<div class="type-time">
<span
v-for="(item, index) in timeTab"
:key="index"
:class="selectIndex === item.value ? 'select' : 'unSelect'"
@click="handleSelect(item.value)"
:class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
@click="handleSelect(index, item.value)"
>{{ item.name }}</span
>
</div>
@@ -19,7 +19,7 @@
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { onMounted, ref, unref, watch } from 'vue';
import PublicTitle from '/@/components/publicTitle.vue';
import { getDetail } from '/@/components/body-d-left/left.api';
import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
@@ -37,10 +37,11 @@
const { setSession, getSession } = useSession();
const { LEFT_KEY3 } = caching;
const { setSpin, spinning } = useSpin();
const selectIndex = ref('2');
function handleSelect(val: string) {
selectIndex.value = val;
const selectIndex = ref(0);
const selectVal = ref('2'); //本年
function handleSelect(index: number, value: string) {
selectIndex.value = index;
selectVal.value = value;
setSpin(true);
setTimeout(() => {
setSpin(false);
@@ -57,7 +58,7 @@
async function getList() {
setSpin(true);
try {
const { code, result } = (await getDetail({ dataType: props.setting.dataType, condition: selectIndex.value })) || {};
const { code, result } = (await getDetail({ dataType: props.setting.dataType, condition: selectVal.value })) || {};
setSpin(!spinning.value);
if (code != 200) {
return;
@@ -83,7 +84,7 @@
if (countList.length < 1) return;
let max = Math.max(...countList);
const indicator = radarList?.value.map((item) => ({ name: item?.hospitalName, max: max }));
const option = radarCharts({ indicator, countList });
const option = radarCharts({ indicator, countList, theme: unref(themeType) });
myChart.setOption(option);
window.addEventListener('resize', () => {
myChart.resize();
src/components/body-d-left/twoL.vue
+17 -37
View File
@@ -1,22 +1,22 @@
<template>
<div class="common-card" :class="[themeType]">
<public-title title="主诉分类" />
<public-title title="主诉分类" :themeType="themeType" />
<div class="zc-inner">
<div class="title">
<div class="type-check">
<span
: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="selectValue" class="type-select" :options="selectOptions">
<a-select-option value="全部数据">全部数据</a-select-option>
</a-select>
</div>
<div class="type-check">
<span
:class="[sexIndex === index ? 'select' : 'unSelect', themeType]"
v-for="(item, index) in sexType"
:key="index"
@click="handleSelect(index, item.value)"
>{{ item.name }}</span
>
</div>
</div>
<div class="line-chart" ref="chiefChart"></div>
<a-spin :spinning="spinning" class="spin"></a-spin>
@@ -43,13 +43,15 @@
const { setSpin, spinning } = useSpin();
const sexIndex = ref(0);
const sexVal = ref('');
const chiefChart = ref<HTMLElement>();
const selectOptions = ref([{ label: '全部数据', value: 'all' }]);
const selectValue = ref('all');
function handleSelect(index: number) {
function handleSelect(index: number, val: string) {
sexIndex.value = index;
sexVal.value = val;
}
onMounted(() => {
@@ -73,7 +75,7 @@
setSpin(true);
try {
const searchParams = {
sex: sexType[sexIndex.value].value,
sex: sexVal.value,
depart: selectValue.value == 'all' ? '' : selectValue.value,
};
const { code, result } = (await complaint(searchParams)) || {};
@@ -106,7 +108,7 @@
function initChart(xData, ydata) {
let myChart = echarts.init(chiefChart.value);
let options = barOption(xData, ydata);
let options = barOption(xData, ydata, themeType.value);
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
@@ -129,41 +131,19 @@
width: 100%;
display: flex;
align-items: center;
justify-content: right;
justify-content: space-between;
padding: 2% 0;
.type-check {
color: #ffffff;
width: 15%;
display: flex;
justify-content: space-around;
span {
padding: 0 2%;
width: 50px;
cursor: pointer;
font-size: 16px;
}
.select {
color: #45a2ff;
position: relative;
&:after {
content: '';
position: absolute;
display: block;
width: 100%;
left: 0;
bottom: -12px;
height: 6px;
background: url('/@/assets/images/light.png') no-repeat;
background-size: 100% 100%;
}
}
.unSelect {
color: #a3a4a4;
}
}
.type-all {
src/components/body-d-right/bodyRightHooks.ts
+62 -3
View File
@@ -95,7 +95,62 @@ export function useHealth() {
};
}
export function ringOption(chartData, total) {
const ringTheme = {
dark: {
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
textStyle: {
color: '#ffffff',
},
subtextStyle: {
color: '#ffffff',
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#1b7ef2',
tooltip: {
textStyle: {
color: '#fff',
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#1b7ef2',
},
legend: {
textStyle: {
color: '#ffffff',
},
},
seriesLabel: {
color: '#ffffff',
},
},
light: {
color: ['#0098FA', '#0CD9B5', '#6077fc'],
textStyle: {
color: '#5169B8',
},
subtextStyle: {
color: '#607DDB',
},
backgroundColor: 'rgba(50,50,50,0.7)',
tooltip: {
textStyle: {
color: '#fff',
},
backgroundColor: '#607DDB',
borderColor: '#1b7ef2',
},
legend: {
textStyle: {
color: '#1b7ef2',
},
},
seriesLabel: {
color: '#27386E',
},
},
};
export function ringOption(chartData, total, theme) {
const { textStyle, subtextStyle, tooltip, legend, seriesLabel, color } = ringTheme[theme] || ringTheme.dark;
const data = visibleChartLabel(chartData);
return {
title: {
@@ -107,14 +162,16 @@ export function ringOption(chartData, total) {
fontSize: 14,
color: '#ffffff',
fontWeight: 'normal',
...textStyle,
},
subtextStyle: {
color: '#ffffff',
fontSize: 24,
fontWeight: 'bold',
...subtextStyle,
},
},
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
color: color || ['#0098FA', '#0CD9B5', '#3B72AD'],
tooltip: {
trigger: 'item',
show: true,
@@ -123,6 +180,7 @@ export function ringOption(chartData, total) {
},
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#1b7ef2',
...tooltip,
},
legend: {
bottom: '0',
@@ -133,6 +191,7 @@ export function ringOption(chartData, total) {
fontSize: 16,
},
selectedMode: false,
...legend,
},
series: [
{
@@ -146,6 +205,7 @@ export function ringOption(chartData, total) {
formatter: '{d}%',
color: '#ffffff',
fontSize: 14,
...seriesLabel,
},
labelLine: {
show: false,
@@ -155,4 +215,3 @@ export function ringOption(chartData, total) {
],
};
}
src/components/body-d-right/oneR.vue
+6 -1
View File
@@ -2,7 +2,7 @@
<div class="terminal-container common-card" :class="[themeType]">
<public-title title="健康终端报警" :themeType="themeType">
<template #right>
<span class="right-text" @click="viewDetail">查看详情</span>
<span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span>
</template>
</public-title>
<div class="inner">
@@ -145,6 +145,11 @@
font-weight: 100;
cursor: pointer;
margin-right: 3px;
font-size: 18px;
}
.right-text.light {
color: #667ecc;
}
.right-text:hover {
src/components/body-d-right/twoR.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template>
<div class="common-card" :class="themeType">
<public-title title="长庆油田大病人数" />
<public-title title="长庆油田大病人数" :themeType="themeType" />
<div class="inner" ref="healthChart"></div>
</div>
</template>
@@ -51,7 +51,7 @@
function initChart(chartData, total) {
let myChart = echarts.init(healthChart.value);
let options = ringOption(chartData, total);
let options = ringOption(chartData, total, unref(themeType));
myChart.setOption(options);
window.addEventListener('resize', () => {
myChart.resize();
src/components/publicTitle.vue
+2 -3
View File
@@ -1,9 +1,9 @@
<template>
<div class="title-d public-title" :class="props.themeType">
<span>{{ props.title }}</span>
<div v-if="props.themeType !== 'light'">
<div>
<span class="tips"><slot name="right"></slot></span>
<img src="../assets/img/point.png" alt="" />
<img v-if="props.themeType !== 'light'" src="../assets/img/point.png" alt="" />
</div>
</div>
</template>
@@ -34,7 +34,6 @@
text-align: left;
height: 40px;
line-height: 40px;
font-size: 20px;
font-weight: 700;
display: flex;
src/components/xianMap/xianMap.vue
+1 -1
View File
@@ -133,7 +133,7 @@
end: '',
});
const list = ref(tabList);
const currentIndex = ref(6);
const currentIndex = ref(0);
function changeTab(item, i: number) {
currentIndex.value = i; // 地方医院