update

.env.development

@@ -1,2 +1,2 @@
 // 王昊地址
-VITE_GLOB_API_URL=http://192.168.1.16
+VITE_GLOB_API_URL=http://192.168.1.6

src/assets/less/index.less

@@ -57,6 +57,51 @@
   background-color: rgba(0, 0, 0, 0.3);
 }
 
+.ant-select-dropdown {
+  background-color: #00152b !important;
+  border-right: 1px solid #1b7ef2;
+  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;
+  color: #fff;
+}
+
+.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;
+}
+
 //直升机
 .helicopter {
   width: 60px;

src/components/chinaMap/chinaMap.vue

@@ -396,7 +396,6 @@
             flex: 1;
             height: calc(100% + 22px);
             margin: 10px 0;
-            //border: 1px solid red;
         }
 
         .map-legend {
@@ -404,7 +403,6 @@
             bottom: 15px;
             left: 10px;
             width: 200px;
-            //border: 1px solid red;
             display: flex;
             flex-wrap: wrap;
 
@@ -458,4 +456,4 @@
             }
         }
     }
-</style>
+</style>

src/components/secondaryScreen/commonApi.ts

@@ -0,0 +1,7 @@
+import { get } from '/@/api/request.ts';
+
+export enum Api {
+    depart = 'sys/sysDepart/allSecondaryDeparts',
+}
+
+export const allSecondaryDeparts = () => get(Api.depart);

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -2,14 +2,11 @@
     <div class="center-map">
         <div class="china-map-box">
             <div class="form-container">
-                <!--                <a-select placeholder="选择单位" v-model:value="selectValue" class="type-select" :options="selectOptions">-->
+                <slot name="rightForm"></slot>
-                <!--                    <a-select-option value="全部数据">全部数据</a-select-option>-->
+            </div>
-                <!--                </a-select>-->
+            <div style="flex: 1; overflow: hidden; margin: 0 0 10px">
-                <!--                <a-select v-model:value="selectValue" class="type-select" :options="selectOptions">-->
+                <div id="mapContainer" class="mapContainer"></div>
-                <!--                    <a-select-option value="全部数据">全部数据</a-select-option>-->
-                <!--                </a-select>-->
             </div>
-            <div class="mapContainer" id="mapContainer"></div>
             <div v-show="false" id="container"></div>
             <div v-show="false" id="panel"></div>
         </div>
@@ -45,8 +42,17 @@
             position: relative;
         }
 
+        .form-container {
+            position: absolute;
+            //right: 9px;
+            right: 0;
+            top: 17px;
+            z-index: 1;
+        }
+
         .mapContainer {
             flex: 1;
+            height: calc(100% + 22px);
             margin: 10px 0;
         }
     }

src/components/secondaryScreen/secondMap/secondMapHooks.ts

@@ -13,3 +13,58 @@
 //     },
 // ];
 
+import {onMounted, ref} from "vue";
+import {allSecondaryDeparts} from "/@/components/secondaryScreen/commonApi";
+
+export function useDepart({selectOption = [],}) {
+    const orgCode = ref();
+    const option = ref([]);
+    const fieldNames = {label: 'departName', value: 'orgCode',}
+    onMounted(() => {
+        if (selectOption && Array.isArray(selectOption) && selectOption.length > 0) {
+            setOption(selectOption);
+        } else {
+            getOptionData();
+        }
+    });
+
+    function setOption(option) {
+        option.value = selectOption || option;
+    }
+
+    async function getOptionData() {
+        const {result, code} = await allSecondaryDeparts();
+        if (code == 200) {
+            option.value = result;
+        }
+    }
+
+    return {
+        orgCode,
+        option,
+        setOption,
+        fieldNames
+    };
+}
+
+export function useTimeType(t) {
+    const type = ref(t || '')
+    const timeRangeOption = [
+        {
+            label: '近一周',
+            value: 'week'
+        },
+        {
+            label: '近一月',
+            value: 'month'
+        },
+        {
+            label: '近一年',
+            value: 'year'
+        }
+    ]
+    return {
+        type,
+        timeRangeOption
+    }
+}

src/views/indexSon.vue

@@ -19,7 +19,18 @@
                 </template>
             </div>
             <div class="body-d-middle">
-                <SecondMap />
+                <SecondMap>
+                    <template #rightForm>
+                        <a-select
+                            placeholder="选择单位"
+                            v-model:value="orgCode"
+                            class="type-select"
+                            :options="option"
+                            :fieldNames="fieldNames"
+                        ></a-select>
+                        <a-select placeholder="选择时间范围" v-model:value="type" class="type-select" :options="timeRangeOption"></a-select>
+                    </template>
+                </SecondMap>
             </div>
             <div class="body-d-right">
                 <one-r />
@@ -36,12 +47,12 @@
     import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
     import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
     import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
-    import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap.vue';
+    import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
-    import * as dayjs from 'dayjs';
     import router from '/@/router';
     import ItemD from '/@/components/item-d/item-d.vue';
+    import { useDepart, useTimeType } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+    import { useTopTime } from '/@/utils/utils.ts';
 
-    const dayTimeO = ref();
     const dayTimeT = ref();
     const dataList = ref([
         {
@@ -94,31 +105,19 @@
         }, 1000);
     }
 
-    function getTime() {
+    init();
-        dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
-        dayTimeT.value =
-            dayjs().diff(dayjs('2018-10-01'), 'day') +
-            '天' +
-            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
-            '时' +
-            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH') + ':00:00'), 'minutes')) +
-            '分' +
-            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH:mm') + ':00'), 'seconds')) +
-            '秒';
-    }
 
-    function getZero(num: any) {
+    function getTime() {
-        if (num < 10) {
+        const { timeRight } = useTopTime();
-            return '0' + num;
+        dayTimeT.value = timeRight;
-        }
-        return num;
     }
 
     function clickBack() {
         router.go(-1);
     }
 
-    init();
+    const { orgCode, option, fieldNames } = useDepart({});
+    const { type, timeRangeOption } = useTimeType('week');
 </script>
 <style lang="less" scoped>
     .outer {
@@ -219,6 +218,12 @@
             display: flex;
             flex-direction: column;
         }
+
+        .type-select {
+            width: 120px;
+            color: #008cff;
+            margin-right: 10px;
+        }
     }
 
     .bottom-d {