update 调整样式·

src/assets/less/index.less

@@ -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 {
+.ant-select {
-  color: #fff !important;
+  color: var(--antSelectFontColor) !important;
-  background-color: #000;
+  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;
+  color: var(--antSelectFontColor) !important;
-  background-color: #002e64 !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

@@ -2,6 +2,11 @@
 
     --antSelectDropdownBg: #00152b;
     --antSelectDropdownBorderColor: #1b7ef2;
+    --antSelectItemActive: #002e64;
+    --antSelectFontColor: #fff;
+    --antSelectBg: #000;
     /*服务详情数据*/
+    --typeTimeSelectColor: #45a2ff;
+    --typeTimeUnSelectColor: #a3a4a4;
 
 }

src/assets/theme/themeList.ts

@@ -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

@@ -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, [
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, itemStyle),
-                        { offset: 0, color: '#008CFF' },
-                        { offset: 1, color: '#33CBFE' },
-                    ]),
                 },
                 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

@@ -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

@@ -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'"
+                    :class="[selectIndex === index ? 'select' : 'unSelect', themeType]"
-                    @click="handleSelect(item.value)"
+                    @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');
+    const selectIndex = ref(0);
-
+    const selectVal = ref('2'); //本年
-    function handleSelect(val: string) {
+    function handleSelect(index: number, value: string) {
-        selectIndex.value = val;
+        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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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 {