update

2023-12-18 18:34:19 +08:00
parent 2cc8886c2d
commit 580a4fc5c6
50 changed files with 2343 additions and 223 deletions
@@ -6,7 +6,8 @@
            </template>
        </public-title>
        <div class="inner">
-            <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
+            <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4"
+                                  v-bind="classOption">
                <div class="item" v-for="(item, i) in scrollList" :key="i">
                    <span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
                    <span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
@@ -58,221 +59,225 @@
    </div>
 </template>
 <script setup lang="ts">
-    import { onMounted, ref } from 'vue';
-    import { useRouter } from 'vue-router';
-    import $bus from '/@/utils/bus.ts';
-    import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
-    import PublicTitle from '/@/components/publicTitle.vue';
-    import Dialog from '/@/components/dialog/Dialog.vue';
-    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-    import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
-    import { Map } from '/@/assets/mapUtils/map.ts';
+import {onMounted, ref} from 'vue';
+import {useRouter} from 'vue-router';
+import $bus from '/@/utils/bus.ts';
+import {columns} from '/@/components/body-d-right/bodyRightHooks.ts';
+import PublicTitle from '/@/components/publicTitle.vue';
+import Dialog from '/@/components/dialog/Dialog.vue';
+import {Vue3SeamlessScroll} from 'vue3-seamless-scroll';
+import {getMonitorList} from '/@/components/body-d-right/right.api.ts';
+import {Map} from '/@/assets/mapUtils/map.ts';

-    const router = useRouter();
-    const classOption = ref({
-        step: 0.3, // 速度
-    });
-    const open = ref<boolean>(false);
-    const openInfor = ref<boolean>(false);
-    const userInfo = ref({
-        realName: '',
-        orgName1: '',
-        phone: '',
-        eventType_dictText: '',
-        warnTime: '',
-        address: '',
-    });
+const router = useRouter();
+const classOption = ref({
+    step: 0.3, // 速度
+});
+const open = ref<boolean>(false);
+const openInfor = ref<boolean>(false);
+const userInfo = ref({
+    realName: '',
+    orgName1: '',
+    phone: '',
+    eventType_dictText: '',
+    warnTime: '',
+    address: '',
+});

-    const dataSource = ref([
-        {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-        },
-    ]);
+const dataSource = ref([
+    {
+        key: '1',
+        name: '胡彦斌',
+        age: 32,
+        address: '西湖区湖底公园1号',
+    },
+]);

-    /**
-     * @desc open员工信息
-     */
-    function handlePolice(item) {
-        userInfo.value = item;
-        openInfor.value = true;
-        classOption.value.step = 0;
+/**
+ * @desc open员工信息
+ */
+function handlePolice(item) {
+    userInfo.value = item;
+    openInfor.value = true;
+    classOption.value.step = 0;
+}
+
+/**
+ * @desc close员工信息
+ */
+function handlePoliceClose() {
+    openInfor.value = false;
+    classOption.value.step = 0.3;
+}
+
+onMounted(() => {
+    getScrollList();
+});
+
+/**
+ * @desc 终端报警
+ * */
+const scrollList = ref([]);
+
+async function getScrollList() {
+    const {code, result} = await getMonitorList({pageSize: 10, pageNo: 1});
+    if (code == 200) {
+        scrollList.value = result.records;
    }
+}

-    /**
-     * @desc close员工信息
-     */
-    function handlePoliceClose() {
-        openInfor.value = false;
-        classOption.value.step = 0.3;
+function sendPosition(item) {
+    let {lon, lat} = item;
+    if (lon && lat) {
+        Map.createMarker(item, () => {
+            handlePolice(item);
+        });
    }
+}

-    onMounted(() => {
-        getScrollList();
-    });
-
-    /**
-     * @desc 终端报警
-     * */
-    const scrollList = ref([]);
-
-    async function getScrollList() {
-        const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
-        if (code == 200) {
-            scrollList.value = result.records;
-        }
-    }
-
-    function sendPosition(item) {
-        let { lon, lat } = item;
-        if (lon && lat) {
-            Map.createMarker(item, () => {
-                handlePolice(item);
-            });
-        }
-    }
-
-    function viewDetail() {
-        router.push({ path: '/secondScreen' });
-    }
+function viewDetail() {
+    router.push({path: '/secondScreen'});
+}
 </script>
 <style scoped lang="less">
-    .right-text {
-        font-size: 14px;
-        font-weight: 100;
-        cursor: pointer;
-        margin-right: 3px;
-    }
+.right-text {
+    font-size: 14px;
+    font-weight: 100;
+    cursor: pointer;
+    margin-right: 3px;
+}

-    .inner {
-        height: calc(100% - 40px);
-        display: flex;
-        align-items: center;
-        justify-content: center;
+.right-text:hover {
+    color: #129bff;
+}

-        .scroll {
-            width: 98%;
-            height: 88%;
-            overflow: hidden;
+.inner {
+    height: calc(100% - 40px);
+    display: flex;
+    align-items: center;
+    justify-content: center;

-            .item {
+    .scroll {
+        width: 98%;
+        height: 88%;
+        overflow: hidden;
+
+        .item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 3% 0;
+
+            .fixed-width {
+                display: inline-flex;
+                width: 100px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
+            span {
+                color: #ffffff;
+                font-size: 16px;
+            }
+
+            .time-icon {
                display: flex;
                align-items: center;
-                justify-content: space-between;
-                padding: 3% 0;
-
-                .fixed-width {
-                    display: inline-flex;
-                    width: 100px;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-
-                span {
-                    color: #ffffff;
-                    font-size: 16px;
-                }
-
-                .time-icon {
-                    display: flex;
-                    align-items: center;
-                }
-
-                .terminal-icon {
-                    margin-left: 15px;
-                    display: inline-block;
-                    width: 18px;
-                    height: 18px;
-                    background: url('/@/assets/images/terminal.png') no-repeat;
-                    background-size: 100% 100%;
-                    cursor: pointer;
-                }
-
-                .position {
-                    margin-left: 5px;
-                    display: inline-block;
-                    width: 20px;
-                    height: 20px;
-                    background: url('/@/assets/img/position.png') no-repeat;
-                    background-size: 100% 100%;
-                    cursor: pointer;
-                }
            }
-        }
-    }

-    .police-con {
-        color: #ffffff;
-        background-color: #00152b;
-        border: 1px solid #129bff;
-        padding: 2% 0 2% 5%;
-
-        .con-item {
-            padding: 1.3% 0;
-
-            span:nth-child(1) {
-                font-weight: bold;
+            .terminal-icon {
+                margin-left: 15px;
                display: inline-block;
-                width: 20%;
-                text-align: right;
+                width: 18px;
+                height: 18px;
+                background: url('/@/assets/images/terminal.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
            }

-            span:nth-child(2) {
-                padding-left: 2%;
+            .position {
+                margin-left: 5px;
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                background: url('/@/assets/img/position.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
            }
        }
    }
+}
+
+.police-con {
+    color: #ffffff;
+    background-color: #00152b;
+    border: 1px solid #129bff;
+    padding: 2% 0 2% 5%;
+
+    .con-item {
+        padding: 1.3% 0;
+
+        span:nth-child(1) {
+            font-weight: bold;
+            display: inline-block;
+            width: 20%;
+            text-align: right;
+        }
+
+        span:nth-child(2) {
+            padding-left: 2%;
+        }
+    }
+}
 </style>
 <style lang="less">
-    .dialog-con {
-        background-color: #00152b;
-        border: 1px solid #129bff;
-        /*
+.dialog-con {
+    background-color: #00152b;
+    border: 1px solid #129bff;
+    /*
 antd表格样式
 */

-        .ant-table-thead > tr > th {
-            border-bottom: 1px solid #1e73c2 !important;
-        }
+    .ant-table-thead > tr > th {
+        border-bottom: 1px solid #1e73c2 !important;
+    }

-        .ant-table-body {
-            background-color: #00152b !important;
-        }
+    .ant-table-body {
+        background-color: #00152b !important;
+    }

-        .ant-modal-header {
-            border-bottom: none !important;
-        }
+    .ant-modal-header {
+        border-bottom: none !important;
+    }

-        .ant-table-tbody > tr > td {
-            border-bottom: 1px solid #1e73c2 !important;
-            background-color: #00152b !important;
-            color: #ffffff !important;
-        }
+    .ant-table-tbody > tr > td {
+        border-bottom: 1px solid #1e73c2 !important;
+        background-color: #00152b !important;
+        color: #ffffff !important;
+    }

-        .ant-table-tbody > tr.ant-table-row:hover > td,
-        .ant-table-tbody > tr > td.ant-table-cell-row-hover,
-        .ant-table-thead > tr > th {
-            background-color: #00152b !important;
-            color: #ffffff !important;
-        }
+    .ant-table-tbody > tr.ant-table-row:hover > td,
+    .ant-table-tbody > tr > td.ant-table-cell-row-hover,
+    .ant-table-thead > tr > th {
+        background-color: #00152b !important;
+        color: #ffffff !important;
+    }

-        .ant-table-cell-scrollbar {
-            box-shadow: none !important;
-        }
+    .ant-table-cell-scrollbar {
+        box-shadow: none !important;
+    }

-        /*
+    /*
 表格滚动条
 */

-        .ant-table-body::-webkit-scrollbar-thumb {
-            border: 4px solid rgba(0, 0, 0, 0);
-            height: 6px;
-            border-radius: 25px;
-            background-clip: padding-box;
-            background-color: rgba(30, 115, 194, 0.3);
-        }
+    .ant-table-body::-webkit-scrollbar-thumb {
+        border: 4px solid rgba(0, 0, 0, 0);
+        height: 6px;
+        border-radius: 25px;
+        background-clip: padding-box;
+        background-color: rgba(30, 115, 194, 0.3);
    }
+}
 </style>
@@ -21,12 +21,10 @@
        type: String,
    });
    const sleepChart = ref<HTMLElement>();
-    // onMounted(() => {
-    //     init();
-    // });
    watch(
        props,
        () => {
+            console.log(111111111111);
            init();
        },
        { immediate: true }
@@ -23,18 +23,23 @@
    </div>
 </template>
 <script lang="ts" setup>
-    import { onMounted, onUnmounted, ref } from 'vue';
+    import { onMounted, onUnmounted, ref, watch } from 'vue';
    import PublicTitle from '/@/components/publicTitle.vue';
    import { getMonitorList } from '/@/components/secondaryScreen/commonApi.ts';
    import { monitorColumns } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
    import $bus from '/@/utils/bus.ts';
    import { earlyWarning } from '/@/utils/busConstant.ts';
+    import { useRefresh } from '/@/hooks/autoRefresh';

+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
    const tableHeight = ref(0);
    const dataSource = ref([]);
    const pagination = ref({
        current: 1,
-        pageSize: 10,
+        pageSize: 2,
        total: 0,
        onChange: pageChange,
    });
@@ -45,23 +50,31 @@
        $bus.emit(earlyWarning, record);
    }

-    onMounted(() => {
-        init(1);
-        setHeight();
-        window.addEventListener('resize', setHeight);
-        interval();
-    });
+    watch(
+        props,
+        () => {
+            init(1);
+            tableHeight.value == 0 && setHeight();
+            window.addEventListener('resize', setHeight);
+            timer.value && clearInterval(timer.value);
+            // interval();
+        },
+        { immediate: true }
+    );
+
    onUnmounted(() => {
        window.removeEventListener('resize', setHeight);
    });

    function setHeight() {
+        let dom = document.querySelector('.inner-screen');
+        if (!dom) return;
        tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
    }

    async function init(page) {
        const { pageSize, current } = pagination.value;
-        const { code, result } = await getMonitorList({ pageSize, pageNo: page });
+        const { code, result } = await getMonitorList({ pageSize, pageNo: page, orgCode: props.orgCode });
        if (code == 200) {
            dataSource.value = result.records;
            pagination.value.total = result.total;
@@ -77,12 +90,16 @@
    }

    function interval() {
-        timer.value = setInterval(() => {
-            let page = pagination.value.current < pages.value ? pagination.value.current + 1 : 1;
-            init(page);
-        }, 10000);
+        console.log(55555);
+        // timer.value = setInterval(() => {
+        let page = pagination.value.current < pages.value ? pagination.value.current + 1 : 1;
+        init(page);
+        // }, 3000);
    }

+    const { refreshState } = useRefresh(3000, () => {
+        interval();
+    });
    onUnmounted(() => {
        clearInterval(timer.value);
    });
@@ -9,7 +9,7 @@
    </div>
 </template>
 <script setup lang="ts">
-    import { ref, unref, onMounted } from 'vue';
+    import { ref, unref, onMounted, watch } from 'vue';
    import * as echarts from 'echarts';
    import PublicTitle from '/@/components/publicTitle.vue';
    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
@@ -21,13 +21,16 @@
        orgCode: String,
        type: String,
    });
+    watch(
+        props,
+        () => {
+            init();
+        },
+        { immediate: true }
+    );
    const { setSpin, spinning } = useSpin();
    const healthChart = ref<HTMLElement>();
-
    const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
-    onMounted(() => {
-        init();
-    });
    const { stepData, total, setStep } = useStep();

    async function init() {
@@ -53,7 +53,8 @@
    const { isShow, className, setIsShow } = useMoveClass();

    function init() {
-        Map.initMap({ el: 'mapContainer' });
+        let mapContainer = document.querySelector('.mapContainer');
+        mapContainer && Map.initMap({ el: 'mapContainer' });
        getMapList();
    }

@@ -12,6 +12,10 @@ export function useDepart() {
        getOptionData();
    });

+    function setOrgCode(val) {
+        orgCode.value = val;
+    }
+
    function setOption(data) {
        option.value = data;
        orgCode.value = data[0]?.orgCode;
@@ -26,6 +30,7 @@ export function useDepart() {

    return {
        orgCode,
+        setOrgCode,
        option,
        setOption,
        fieldNames,