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/assets/less/index.less
+31 -12
View File
@@ -3,7 +3,6 @@
@import "./public-title";
.type-time {
padding-right: 4%;
padding-top: 3%;
font-size: 16px;
display: flex;
@@ -34,6 +33,7 @@
.unSelect.dark {
color: var(--typeTimeUnSelectColor);
}
.select.light {
color: #5876DB;
background-color: #BDC9F5;
@@ -44,7 +44,26 @@
}
.unSelect.light {
background-color: #d2d7f7;
margin-left: 5px;
color: #889BDB;
border: 1px solid #BDC9F5;
border-radius: 5px;
}
}
.type-check {
.select.light {
color: #5876DB;
background-color: #BDC9F5;
position: relative;
margin-left: 5px;
border: 1px solid #607DDB;
border-radius: 5px;
}
.unSelect.light {
background-color: #d2d7f7;
margin-left: 5px;
color: #889BDB;
border: 1px solid #BDC9F5;
@@ -86,14 +105,14 @@
}
// 下拉框样式-start
.ant-select.bg-000 {
color: #fff !important;
background-color: #000;
.ant-select {
color: var(--antSelectFontColor) !important;
background-color: var(--antSelectBg);
}
.ant-select-dropdown {
background-color: var(--antSelectDropdownBg) !important;
border: 1px solid var(----antSelectDropdownBorderColor);
border: 1px solid var(--antSelectDropdownBorderColor);
border-top: none;
}
@@ -115,7 +134,7 @@
// 选中字体颜色
.ant-select-selection-item {
//color: #1b7ef2 !important;
color: #fff;
color: var(--antSelectFontColor);
}
.ant-select-item-option-active {
@@ -123,7 +142,7 @@
}
.ant-select-item-option-active:hover {
background-color: #002e64 !important;
background-color: var(--antSelectItemActive) !important;
}
// 箭头颜色
@@ -132,7 +151,7 @@
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: #002e64 !important;
background-color: var(--antSelectItemActive) !important;
}
// 下拉框样式-end
@@ -143,12 +162,12 @@
}
.ant-cascader-menu-item:hover {
background-color: #002e64 !important;
background-color: var(--antSelectItemActive) !important;
}
.ant-cascader-menu-item-active {
color: #fff !important;
background-color: #002e64 !important;
color: var(--antSelectFontColor) !important;
background-color: var(--antSelectItemActive) !important;
}
.ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon {
@@ -157,7 +176,7 @@
// 级联选择器样式-end
.ant-empty-description {
color: #fff;
color: var(--antSelectFontColor);
}
//空表格hover白色
src/assets/theme/theme.css
+5
View File
@@ -2,6 +2,11 @@
--antSelectDropdownBg: #00152b;
--antSelectDropdownBorderColor: #1b7ef2;
--antSelectItemActive: #002e64;
--antSelectFontColor: #fff;
--antSelectBg: #000;
/*服务详情数据*/
--typeTimeSelectColor: #45a2ff;
--typeTimeUnSelectColor: #a3a4a4;
}
src/assets/theme/themeList.ts
+7
View File
@@ -3,6 +3,9 @@ export const themeList = {
/*下拉框*/
antSelectDropdownBg: '#00152b',
antSelectDropdownBorderColor: '#1b7ef2',
antSelectItemActive: '#002e64', //选中或鼠标移过
antSelectFontColor: '#fff',
antSelectBg: '#000',
/*服务详情数据*/
typeTimeSelectColor: '#45a2ff',
typeTimeUnSelectColor: '#a3a4a4',
@@ -10,6 +13,10 @@ export const themeList = {
light: {
antSelectDropdownBg: '#fff',
antSelectDropdownBorderColor: '#1b7ef2',
antSelectItemActive: '#ced7f6',
antSelectFontColor: '#5876DB',
antSelectBg: '#ced7f6',
/*服务详情数据*/
typeTimeSelectColor: '#45a2ff',
typeTimeUnSelectColor: '#a3a4a4',
},
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; // 地方医院
src/hooks/theme/useTheme.ts
+2
View File
@@ -1,5 +1,6 @@
import { nextTick, onMounted, ref } from 'vue';
import { useUserStore } from '/@/store/modules/user.ts';
import { setTheme } from '/@/assets/theme/themeList.ts';
export function useTheme() {
const themeType = ref('light');
@@ -7,6 +8,7 @@ export function useTheme() {
const store = useUserStore();
nextTick(() => {
themeType.value = store.getThemeType;
setTheme(themeType.value);
});
});
return {