update 更换背景图 看板接口对接

src/components/body-d-left/twoL.vue

@@ -5,107 +5,112 @@
             <div class="title">
                 <div class="type-check">
                     <span
-                        :class="selectIndex === index ? 'select' : 'unSelect'"
-                        v-for="(item, index) in typeTime"
+                        :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="typesSelect" class="type-select">
+                    <a-select v-model:value="selectValue" class="type-select" :options="selectOptions">
                         <a-select-option value="全部数据">全部数据</a-select-option>
-                        <a-select-option value="jack">Jack</a-select-option>
-                        <a-select-option value="lucy">Lucy</a-select-option>
                     </a-select>
                 </div>
             </div>
             <div class="line-chart" ref="chiefChart"></div>
+            <a-spin :spinning="spinning" class="spin"></a-spin>
         </div>
     </div>
 </template>
 <script setup lang="ts">
-    import { ref, onMounted } from 'vue';
+    import { ref, onMounted, watch } from 'vue';
     import PublicTitle from '../publicTitle.vue';
     import * as echarts from 'echarts';
+    import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
+    import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.ts';
 
-    const typesSelect = ref('全部数据');
-    const typeTime = ref([
-        {
-            name: '男',
-            value: 'man',
-        },
-        {
-            name: '女',
-            value: 'women',
-        },
-    ]);
-    const selectIndex = ref(0);
+    const { setSpin, spinning } = useSpin();
+
+    const sexIndex = ref(0);
     const chiefChart = ref<HTMLElement>();
+
+    const selectOptions = ref([{ label: '全部数据', value: 'all' }]);
+    const selectValue = ref('all');
+
+    function handleSelect(index: number) {
+        sexIndex.value = index;
+    }
+
     onMounted(() => {
-        let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
-        let ydata = [120, 200, 150, 80, 70, 110, 130];
-        initChart(xdata, ydata);
+        init();
     });
 
+    function init() {
+        getDepartOption();
+        getList();
+    }
+
+    async function getDepartOption() {
+        const { code, result } = await getDepart({});
+        if (code == 200) {
+            const arr = result?.map((item) => ({ ...item, label: item?.departName, value: item?.orgCode }));
+            selectOptions.value = [{ label: '全部数据', value: 'all' }, ...arr];
+        }
+    }
+
+    async function getList() {
+        setSpin(true);
+        try {
+            const searchParams = {
+                sex: sexType[sexIndex.value].value,
+                depart: selectValue.value == 'all' ? '' : selectValue.value,
+            };
+            const { code, result } = (await complaint(searchParams)) || {};
+            setSpin(false);
+            if (code != 200) {
+                return;
+            }
+            if (Array.isArray(result) && result.length == 0) {
+                return EmptyChart();
+            }
+            const xData = result.map((item) => item.name);
+            const yData = result.map((item) => item.count);
+            initChart(xData, yData);
+        } catch {
+            setSpin(false);
+            EmptyChart();
+        }
+    }
+
+    watch([selectValue, sexIndex], () => {
+        getList();
+    });
+
+    function EmptyChart() {
+        initChart([], []);
+    }
+
     function initChart(xData, ydata) {
         let myChart = echarts.init(chiefChart.value);
-        let options = {
-            grid: {
-                top: '10%',
-                left: '8%',
-                right: '8%',
-                bottom: '20%',
-            },
-            xAxis: {
-                type: 'category',
-                data: xData,
-                axisLabel: {
-                    color: '#FFFFFF',
-                    fontSize: 14,
-                },
-            },
-            yAxis: {
-                type: 'value',
-                axisLabel: {
-                    color: '#FFFFFF',
-                    fontSize: 14,
-                },
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        type: 'dashed',
-                        color: 'rgba(217, 231, 255, 0.2)',
-                    },
-                },
-            },
-            series: [
-                {
-                    data: ydata,
-                    type: 'bar',
-                    barWidth: '20%',
-                    itemStyle: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            { offset: 0, color: '#008CFF' },
-                            { offset: 1, color: '#33CBFE' },
-                        ]),
-                    },
-                },
-            ],
-        };
+        let options = barOption(xData, ydata);
         myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();
         });
     }
-
-    function handleSelect(index) {
-        selectIndex.value = index;
-    }
 </script>
 <style scoped lang="less">
     .inner {
+        position: relative;
         height: calc(100% - 40px);
+
+        .spin {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+        }
+
         .title {
             width: 100%;
             display: flex;
@@ -148,15 +153,16 @@
             }
 
             .type-all {
-                width: 18%;
                 color: #ffffff;
+                margin-right: 10px;
 
                 .type-select {
-                    width: 94%;
+                    width: 120px;
                     color: #008cff;
                 }
             }
         }
+
         .line-chart {
             margin: 0 auto;
             width: 96%;
@@ -171,33 +177,41 @@
         border-left: 1px solid #1b7ef2;
         border-bottom: 1px solid #1b7ef2;
     }
+
     .ant-select-item {
         color: #1b7ef2 !important;
     }
+
     //框背景色
     .ant-select:not(.ant-select-customize-input) .ant-select-selector {
         color: #1b7ef2 !important;
         background-color: transparent !important;
         border: 1px solid #1b7ef2 !important;
     }
+
     .ant-select-item-option-selected {
         color: #ffffff !important;
     }
+
     // 选中字体颜色
     .ant-select-selection-item {
         color: #1b7ef2 !important;
     }
+
     .ant-select-item-option-active {
         background-color: transparent !important;
     }
+
     .ant-select-item-option-active:hover {
         background-color: #002e64 !important;
     }
+
     // 箭头颜色
     .ant-select-arrow {
         color: #1b7ef2 !important;
     }
+
     .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
         background-color: #002e64 !important;
     }
-</style>
+</style>