update 增加应急单弹窗、调整echart图表

src/views/components/orderDialog.vue

@@ -0,0 +1,89 @@
+<template>
+    <Dialog class="order-dialog" :openVis="visible" width="60%" :title="title" @close="closeDialog" :maskClosable="false">
+        <template #container>
+            <BasicTable
+                ref="registerTable"
+                class="table-container"
+                :class="[themeType]"
+                :key="visible"
+                :columns="columns"
+                :api="getOrderDetail"
+            ></BasicTable>
+        </template>
+    </Dialog>
+</template>
+<script setup lang="ts">
+    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
+    import { useDialog } from '/@/views/components/dialogHooks.ts';
+    import { ref, watch } from 'vue';
+    import Dialog from '/@/components/dialog/Dialog.vue';
+    import { useTheme } from '/@/hooks/theme/useTheme.ts';
+    import { getOrderDetail } from '/@/components/body-d-left/left.api.ts';
+
+    const props = defineProps({
+        title: String,
+    });
+    const { themeType } = useTheme();
+    const columns = [
+        {
+            title: '被救助人',
+            dataIndex: 'salvageUserName',
+            key: 'salvageUserName',
+        },
+        {
+            title: '单位',
+            dataIndex: 'salvageUserSecondDepart',
+            key: 'salvageUserSecondDepart',
+            ellipsis: true,
+        },
+        {
+            title: '部门',
+            dataIndex: 'salvageUserDepart',
+            key: 'salvageUserDepart',
+            ellipsis: true,
+        },
+        {
+            title: '性别',
+            dataIndex: 'salvageUserSex',
+            key: 'salvageUserSex',
+            width: 80,
+            customRender: ({ text }) => {
+                if (!text) return '';
+                return text == '1' ? '女' : '男';
+            },
+        },
+        {
+            title: '求助方式',
+            dataIndex: 'initiatorType',
+            key: 'initiatorType',
+            width: 100,
+            customRender: ({ text }) => {
+                return text == '0' ? '120' : text == '1' ? '应急就医' : '';
+            },
+        },
+        {
+            title: '求助时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+        },
+        {
+            title: '电话',
+            dataIndex: 'salvageUserMobile',
+            key: 'salvageUserMobile',
+        },
+    ];
+    const { visible, title, closeDialog, openDialog } = useDialog({ title: props.title });
+    const registerTable = ref(null);
+    watch(props, () => {
+        registerTable.value?.getRecords();
+    });
+    defineExpose({
+        openDialog,
+    });
+</script>
+
+<style scoped lang="less">
+    .table-container {
+        margin: 10px;
+    }
+</style>

src/views/components/phoneDialog/phoneDialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <Dialog class="phone-dialog" :openVis="visible" width="50%" :title="title" @close="closeDialog" :maskClosable="false">
+    <Dialog class="phone-dialog" :openVis="visible" width="60%" :title="title" @close="closeDialog" :maskClosable="false">
         <template #container>
             <div v-if="useForm" class="form-container">
                 <Form :model="formRecord" :label-width="100" v-bind="formItemLayout">
@@ -61,16 +61,19 @@
             title: '单位',
             dataIndex: 'departName',
             key: 'departName',
+            ellipsis: true,
         },
         {
             title: '部门',
             dataIndex: 'orgName',
             key: 'orgName',
+            ellipsis: true,
         },
         {
             title: '性别',
             dataIndex: 'sex_dictText',
             key: 'sex_dictText',
+            width: 80,
         },
         {
             title: '时间',

src/views/index.vue

@@ -10,7 +10,7 @@
         <div class="body-d">
             <div class="body-d-left" :class="[themeType]">
                 <one-l theme="light" :setting="setting" :refreshState="refreshState" @handleClick="handlePhoneDialog" />
-                <two-l theme="light" :key="tabState" :refreshState="refreshState" />
+                <two-l theme="light" :key="tabState" :refreshState="refreshState" @view-detail="viewDetail" />
                 <three-l :key="tabState" :setting="setting" :refreshState="refreshState" />
             </div>
             <div class="body-d-middle">
@@ -28,10 +28,14 @@
             </div>
         </div>
         <div class="bottom-d"></div>
+        <!-- 云坐席弹窗 -->
         <YunZuoXiDialog ref="yunZuoXiDialogRef" :record="xianYunData" @confirmHelp="confirmHelp" />
         <EmployeeDialog ref="employeeDialogRef" :record="socketData" />
         <EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
+        <!-- 服务详情数据弹窗 -->
         <PhoneDialog ref="phoneDialogRef" :title="phoneDialogTitle" :useForm="true" :setting="setting" :phoneType="phoneType" />
+        <!-- 主诉分类应急工单弹窗-->
+        <OrderDialog ref="orderDialogRef" title="应急工单"></OrderDialog>
     </div>
 </template>
 <script setup lang="ts">
@@ -53,6 +57,7 @@
     import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
     import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
     import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
+    import OrderDialog from '/@/views/components/orderDialog.vue';
     import { Map } from '/@/assets/mapUtils/map.ts';
     import { useUserStore } from '/@/store/modules/user.ts';
     import { lightMapOption } from '/@/assets/mapUtils/mapConstant.ts';
@@ -332,6 +337,15 @@
             emergencyDialogRef.value.openDialog();
         });
     }
+
+    /**
+     * 应急单查看详情
+     */
+    const orderDialogRef = ref(null);
+
+    function viewDetail() {
+        orderDialogRef.value.openDialog();
+    }
 </script>
 <style lang="less" scoped>
     .outer {