Merge branch 'master' of https://gitee.com/ant-bear/cqyt-emergency-screen

2023-12-11 13:27:32 +08:00
parent 66175f4b4b c9663bb3ba
commit d20335eb4c
7 changed files with 149 additions and 33 deletions
@@ -1,2 +1,2 @@
 // 王昊地址
-VITE_GLOB_API_URL=http://192.168.1.16
+VITE_GLOB_API_URL=http://192.168.1.6
@@ -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;
@@ -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>
@@ -0,0 +1,7 @@
+import { get } from '/@/api/request.ts';
+
+export enum Api {
+    depart = 'sys/sysDepart/allSecondaryDeparts',
+}
+
+export const allSecondaryDeparts = () => get(Api.depart);
@@ -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">-->
-                <!--                    <a-select-option value="全部数据">全部数据</a-select-option>-->
-                <!--                </a-select>-->
-                <!--                <a-select v-model:value="selectValue" class="type-select" :options="selectOptions">-->
-                <!--                    <a-select-option value="全部数据">全部数据</a-select-option>-->
-                <!--                </a-select>-->
+                <slot name="rightForm"></slot>
+            </div>
+            <div style="flex: 1; overflow: hidden; margin: 0 0 10px">
+                <div id="mapContainer" class="mapContainer"></div>
            </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;
        }
    }
@@ -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
+    }
+}
@@ -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 * as dayjs from 'dayjs';
+    import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
    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() {
-        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')) +
-            '秒';
-    }
+    init();

-    function getZero(num: any) {
-        if (num < 10) {
-            return '0' + num;
-        }
-        return num;
+    function getTime() {
+        const { timeRight } = useTopTime();
+        dayTimeT.value = timeRight;
    }

    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 {