renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zk
2024-07-03 10:31:13 +08:00
parent a1850b95b6
commit 352948e98b
10 changed files with 308 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/less/index.less
+133 -133
View File
@@ -3,233 +3,233 @@
@import "./public-title"; @import "./public-title";
html, body, #app { html, body, #app {
min-width: 1300px; min-width: 1300px;
overflow-x: auto; overflow-x: auto;
} }
.type-time { .type-time {
padding-top: 3%; padding-top: 3%;
font-size: 16px; font-size: 16px;
display: flex; display: flex;
justify-content: right; justify-content: right;
span { span {
padding: 0 2%; padding: 0 2%;
cursor: pointer; cursor: pointer;
} }
.select.dark { .select.dark {
color: var(--typeTimeSelectColor); color: var(--typeTimeSelectColor);
position: relative; position: relative;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
display: block; display: block;
width: 72%; width: 72%;
left: 6px; left: 6px;
bottom: -12px; bottom: -12px;
height: 6px; height: 6px;
background: url('/@/assets/images/light.png') no-repeat; background: url('/@/assets/images/light.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.unSelect.dark { .unSelect.dark {
color: var(--typeTimeUnSelectColor); color: var(--typeTimeUnSelectColor);
} }
.select.light { .select.light {
color: #5876DB; color: #5876DB;
background-color: #BDC9F5; background-color: #BDC9F5;
position: relative; position: relative;
margin-left: 5px; margin-left: 5px;
border: 1px solid #607DDB; border: 1px solid #607DDB;
border-radius: 5px; border-radius: 5px;
} }
.unSelect.light { .unSelect.light {
background-color: #d2d7f7; background-color: #d2d7f7;
margin-left: 5px; margin-left: 5px;
color: #889BDB; color: #889BDB;
border: 1px solid #BDC9F5; border: 1px solid #BDC9F5;
border-radius: 5px; border-radius: 5px;
} }
} }
.type-check { .type-check {
.select.light { .select.light {
color: #5876DB; color: #5876DB;
background-color: #BDC9F5; background-color: #BDC9F5;
position: relative; position: relative;
margin-left: 5px; margin-left: 5px;
border: 1px solid #607DDB; border: 1px solid #607DDB;
border-radius: 5px; border-radius: 5px;
} }
.unSelect.light { .unSelect.light {
background-color: #d2d7f7; background-color: #d2d7f7;
margin-left: 5px; margin-left: 5px;
color: #889BDB; color: #889BDB;
border: 1px solid #BDC9F5; border: 1px solid #BDC9F5;
border-radius: 5px; border-radius: 5px;
} }
} }
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: 12px; width: 12px;
height: 12px; height: 12px;
} }
*::-webkit-scrollbar-button { *::-webkit-scrollbar-button {
width: 0; width: 0;
height: 0; height: 0;
display: none; display: none;
} }
*::-webkit-scrollbar-corner { *::-webkit-scrollbar-corner {
background-color: transparent; background-color: transparent;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0); border: 4px solid rgba(0, 0, 0, 0);
height: 6px; height: 6px;
border-radius: 25px; border-radius: 25px;
background-clip: padding-box; background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.nowrap { .nowrap {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.ant-modal-mask { .ant-modal-mask {
background-color: rgba(0, 0, 0, 0.65) !important; background-color: rgba(0, 0, 0, 0.65) !important;
} }
// 下拉框样式-start // 下拉框样式-start
.ant-select { .ant-select {
color: var(--antSelectFontColor) !important; color: var(--antSelectFontColor) !important;
background-color: var(--antSelectBg); background-color: var(--antSelectBg);
} }
.ant-select-dropdown { .ant-select-dropdown {
background-color: var(--antSelectDropdownBg) !important; background-color: var(--antSelectDropdownBg) !important;
border: 1px solid var(--antSelectDropdownBorderColor); border: 1px solid var(--antSelectDropdownBorderColor);
border-top: none; border-top: none;
} }
.ant-select-item { .ant-select-item {
color: #1b7ef2 !important; color: #1b7ef2 !important;
} }
//框背景色 //框背景色
.ant-select:not(.ant-select-customize-input) .ant-select-selector { .ant-select:not(.ant-select-customize-input) .ant-select-selector {
color: var(--antSelectFontColor) !important; color: var(--antSelectFontColor) !important;
background-color: transparent !important; background-color: transparent !important;
border: 1px solid var(--antSelectDropdownBorderColor) !important; border: 1px solid var(--antSelectDropdownBorderColor) !important;
} }
.ant-select-item-option-selected { .ant-select-item-option-selected {
color: #ffffff !important; color: #ffffff !important;
} }
// 选中字体颜色 // 选中字体颜色
:deep(.ant-select-selection-item) { :deep(.ant-select-selection-item) {
color: var(--antSelectFontColor); color: var(--antSelectFontColor);
} }
.ant-select-item-option-active { .ant-select-item-option-active {
background-color: transparent !important; background-color: transparent !important;
} }
.ant-select-item-option-active:hover { .ant-select-item-option-active:hover {
background-color: var(--antSelectItemActive) !important; background-color: var(--antSelectItemActive) !important;
} }
// 箭头颜色 // 箭头颜色
.ant-select-arrow { .ant-select-arrow {
color: var(--antSelectDropdownBorderColor) !important; color: var(--antSelectDropdownBorderColor) !important;
} }
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) { .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: var(--antSelectItemActive) !important; background-color: var(--antSelectItemActive) !important;
} }
// 下拉框样式-end // 下拉框样式-end
// 级联选择器样式-start // 级联选择器样式-start
.ant-cascader-menu-item { .ant-cascader-menu-item {
color: #1b7ef2 !important; color: #1b7ef2 !important;
} }
.ant-cascader-menu-item:hover { .ant-cascader-menu-item:hover {
background-color: var(--antSelectItemActive) !important; background-color: var(--antSelectItemActive) !important;
} }
.ant-cascader-menu-item-active { .ant-cascader-menu-item-active {
color: var(--antSelectFontColor) !important; color: var(--antSelectFontColor) !important;
background-color: var(--antSelectItemActive) !important; background-color: var(--antSelectItemActive) !important;
} }
.ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon { .ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon {
color: #1b7ef2 !important; color: #1b7ef2 !important;
} }
// 级联选择器样式-end // 级联选择器样式-end
.ant-empty-description { .ant-empty-description {
color: var(--antSelectFontColor); color: var(--antSelectFontColor);
} }
//空表格hover白色 //空表格hover白色
.ant-table-tbody > tr.ant-table-placeholder:hover > td { .ant-table-tbody > tr.ant-table-placeholder:hover > td {
background: transparent !important; background: transparent !important;
} }
//直升机 //直升机
.helicopter { .helicopter {
width: 60px; width: 60px;
height: 37px; height: 37px;
background: url("/@/assets/img/helicopter.png") no-repeat; background: url("/@/assets/img/helicopter.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-bottom: 4px; margin-bottom: 4px;
} }
//Modal //Modal
.dialog.light { .dialog.light {
background-color: #f3f5ff; background-color: #f3f5ff;
.police-con { .police-con {
color: var(--tableFontColor); color: var(--tableFontColor);
background-color: #f3f5ff; background-color: #f3f5ff;
} }
.ant-modal-title { .ant-modal-title {
color: #576BAD !important; color: #576BAD !important;
background: url('/@/assets/images/dialog-light.png') no-repeat; background: url('/@/assets/images/dialog-light.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
.dialog.dark { .dialog.dark {
color: #ffffff; color: #ffffff;
background-color: #00152b; background-color: #00152b;
.police-con { .police-con {
color: #ffffff; color: #ffffff;
background-color: #00152b; background-color: #00152b;
} }
.ant-modal-title { .ant-modal-title {
color: #ffffff !important; color: #ffffff !important;
background: url('/@/assets/images/dialog.png') no-repeat; background: url('/@/assets/images/dialog.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
/*表单*/ /*表单*/
:deep(.ant-form-item-label > label) { :deep(.ant-form-item-label > label) {
color: var(--formLabel); color: var(--formLabel);
} }
src/components/body-d-left/bodyLeftHooks.ts
+1 -1
View File
@@ -370,7 +370,7 @@ export function barOption(xData, ydata, theme) {
grid: { grid: {
top: '18%', top: '18%',
left: '8%', left: '8%',
right: '8%', right: '4%',
bottom: '15%', bottom: '15%',
}, },
tooltip: { tooltip: {
src/components/body-d-left/left.api.ts
+3
View File
@@ -5,6 +5,7 @@ export enum Api {
server = '/health-emergency/emergency/tblUserHelp/statistics', server = '/health-emergency/emergency/tblUserHelp/statistics',
getDetail = '/health-medical/medical/hospital/getMedicalHospital', getDetail = '/health-medical/medical/hospital/getMedicalHospital',
complaint = '/health-emergency/emergency/tblHelpCenter/sicknessTypeStatistic', complaint = '/health-emergency/emergency/tblHelpCenter/sicknessTypeStatistic',
orderDetail = '/health-emergency/emergency/order/list',
} }
//获取全部部门 //获取全部部门
@@ -15,3 +16,5 @@ export const list = (params: any) => get(Api.server, params);
export const complaint = (params: any) => get(Api.complaint, params); export const complaint = (params: any) => get(Api.complaint, params);
//体检数据 //体检数据
export const getDetail = (params: any) => get(Api.getDetail, params); export const getDetail = (params: any) => get(Api.getDetail, params);
//获取主诉分类应急工单详情
export const getOrderDetail = (params: any) => get(Api.orderDetail, params);
src/components/body-d-left/twoL.vue
+26 -1
View File
@@ -1,6 +1,8 @@
<template> <template>
<div class="common-card" :class="[themeType]"> <div class="common-card" :class="[themeType]">
<public-title title="主诉分类" :themeType="themeType" /> <public-title title="主诉分类" :themeType="themeType">
<template #right><span class="right-text" :class="[themeType]" @click="viewDetail">查看详情</span> </template>
</public-title>
<div class="zc-inner"> <div class="zc-inner">
<div class="title"> <div class="title">
<div class="type-all"> <div class="type-all">
@@ -37,6 +39,7 @@
type: Boolean, type: Boolean,
}, },
}); });
const emit = defineEmits(['viewDetail']);
const { themeType } = useTheme(); const { themeType } = useTheme();
const { setSession, getSession } = useSession(); const { setSession, getSession } = useSession();
const { LEFT_KEY2 } = caching; const { LEFT_KEY2 } = caching;
@@ -114,8 +117,30 @@
myChart.resize(); myChart.resize();
}); });
} }
/**
* 查看详情
*/
function viewDetail() {
emit('viewDetail');
}
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.right-text {
font-weight: 100;
cursor: pointer;
margin-right: 3px;
font-size: 18px;
}
.right-text.light {
color: #667ecc;
}
.right-text:hover {
color: #129bff;
}
.zc-inner { .zc-inner {
position: relative; position: relative;
width: 100%; width: 100%;
src/components/dialog/Dialog.vue
+6 -1
View File
@@ -38,6 +38,7 @@
.dialog { .dialog {
border: 1px solid #0a50a0; border: 1px solid #0a50a0;
background-color: #00152b; background-color: #00152b;
padding-bottom: 0;
.ant-modal-title { .ant-modal-title {
position: relative; position: relative;
@@ -68,10 +69,14 @@
padding: 0 !important; padding: 0 !important;
} }
.ant-modal-close-x,
.anticon { .anticon {
color: #999999 !important; color: #999999 !important;
height: 40px; height: 40px;
}
.ant-modal-close-x {
color: #999999 !important;
height: 40px;
line-height: 40px; line-height: 40px;
} }
src/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue
+5 -1
View File
@@ -73,7 +73,6 @@
async function getRecords() { async function getRecords() {
try { try {
dataSource.value = [];
tableLoading.value = true; tableLoading.value = true;
const { code, result } = await props.api({ ...props.apiParams, pageSize: pageSize.value, pageNo: current.value }); const { code, result } = await props.api({ ...props.apiParams, pageSize: pageSize.value, pageNo: current.value });
if (code == 200) { if (code == 200) {
@@ -85,6 +84,9 @@
paginationProp.value = { ...paginationProp.value, ...result }; paginationProp.value = { ...paginationProp.value, ...result };
paginationProp.value.pageSize = result.size; paginationProp.value.pageSize = result.size;
} }
} catch (e) {
dataSource.value = [];
tableLoading.value = false;
} finally { } finally {
tableLoading.value = false; tableLoading.value = false;
} }
@@ -114,6 +116,7 @@
border-top: 1px solid var(--tableHeadBg) !important; border-top: 1px solid var(--tableHeadBg) !important;
border-bottom: none; border-bottom: none;
padding: 9px 9px; padding: 9px 9px;
text-align: center;
} }
:deep(.ant-table-cell-scrollbar) { :deep(.ant-table-cell-scrollbar) {
@@ -141,6 +144,7 @@
background-color: var(--tableRowBg) !important; background-color: var(--tableRowBg) !important;
border-bottom: 1px solid var(--tableRowBorder); border-bottom: 1px solid var(--tableRowBorder);
padding: 10px 4px !important; padding: 10px 4px !important;
text-align: center;
} }
:deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) { :deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
src/views/components/orderDialog.vue
+89
View File
@@ -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
+4 -1
View File
@@ -1,5 +1,5 @@
<template> <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> <template #container>
<div v-if="useForm" class="form-container"> <div v-if="useForm" class="form-container">
<Form :model="formRecord" :label-width="100" v-bind="formItemLayout"> <Form :model="formRecord" :label-width="100" v-bind="formItemLayout">
@@ -61,16 +61,19 @@
title: '单位', title: '单位',
dataIndex: 'departName', dataIndex: 'departName',
key: 'departName', key: 'departName',
ellipsis: true,
}, },
{ {
title: '部门', title: '部门',
dataIndex: 'orgName', dataIndex: 'orgName',
key: 'orgName', key: 'orgName',
ellipsis: true,
}, },
{ {
title: '性别', title: '性别',
dataIndex: 'sex_dictText', dataIndex: 'sex_dictText',
key: 'sex_dictText', key: 'sex_dictText',
width: 80,
}, },
{ {
title: '时间', title: '时间',
src/views/index.vue
+15 -1
View File
@@ -10,7 +10,7 @@
<div class="body-d"> <div class="body-d">
<div class="body-d-left" :class="[themeType]"> <div class="body-d-left" :class="[themeType]">
<one-l theme="light" :setting="setting" :refreshState="refreshState" @handleClick="handlePhoneDialog" /> <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" /> <three-l :key="tabState" :setting="setting" :refreshState="refreshState" />
</div> </div>
<div class="body-d-middle"> <div class="body-d-middle">
@@ -28,10 +28,14 @@
</div> </div>
</div> </div>
<div class="bottom-d"></div> <div class="bottom-d"></div>
<!-- 云坐席弹窗 -->
<YunZuoXiDialog ref="yunZuoXiDialogRef" :record="xianYunData" @confirmHelp="confirmHelp" /> <YunZuoXiDialog ref="yunZuoXiDialogRef" :record="xianYunData" @confirmHelp="confirmHelp" />
<EmployeeDialog ref="employeeDialogRef" :record="socketData" /> <EmployeeDialog ref="employeeDialogRef" :record="socketData" />
<EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" /> <EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" @confirmHelp="confirmHelp" />
<!-- 服务详情数据弹窗 -->
<PhoneDialog ref="phoneDialogRef" :title="phoneDialogTitle" :useForm="true" :setting="setting" :phoneType="phoneType" /> <PhoneDialog ref="phoneDialogRef" :title="phoneDialogTitle" :useForm="true" :setting="setting" :phoneType="phoneType" />
<!-- 主诉分类应急工单弹窗-->
<OrderDialog ref="orderDialogRef" title="应急工单"></OrderDialog>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -53,6 +57,7 @@
import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts'; import { DataType, getSettings, ThemeType } from '/@/utils/settings.ts';
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts'; import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue'; import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
import OrderDialog from '/@/views/components/orderDialog.vue';
import { Map } from '/@/assets/mapUtils/map.ts'; import { Map } from '/@/assets/mapUtils/map.ts';
import { useUserStore } from '/@/store/modules/user.ts'; import { useUserStore } from '/@/store/modules/user.ts';
import { lightMapOption } from '/@/assets/mapUtils/mapConstant.ts'; import { lightMapOption } from '/@/assets/mapUtils/mapConstant.ts';
@@ -332,6 +337,15 @@
emergencyDialogRef.value.openDialog(); emergencyDialogRef.value.openDialog();
}); });
} }
/**
* 应急单查看详情
*/
const orderDialogRef = ref(null);
function viewDetail() {
orderDialogRef.value.openDialog();
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.outer { .outer {
vite.config.ts
+26 -25
View File
@@ -60,29 +60,30 @@ export default defineConfig({
// @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'], include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
}, },
// build: { build: {
// rollupOptions: { sourcemap: false,
// output: { // rollupOptions: {
// //入口文件输出配置 // output: {
// entryFileNames: `assets/js/[name]-[hash].js`, // //入口文件输出配置
// //代码分割后的文件输出配置 // entryFileNames: `assets/js/[name]-[hash].js`,
// chunkFileNames: `assets/js/[name]-[hash].js`, // //代码分割后的文件输出配置
// //静态资源输出配置 // chunkFileNames: `assets/js/[name]-[hash].js`,
// assetFileNames(assetInfo) { // //静态资源输出配置
// //css文件单独输出到css文件夹 // assetFileNames(assetInfo) {
// if (assetInfo.name.endsWith('.css')) { // //css文件单独输出到css文件夹
// return `assets/css/[name]-[hash].css`; // if (assetInfo.name.endsWith('.css')) {
// } // return `assets/css/[name]-[hash].css`;
// //图片文件单独输出到img文件夹 // }
// else if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'].some((ext) => assetInfo.name.endsWith(ext))) { // //图片文件单独输出到img文件夹
// return `assets/img/[name]-[hash].[ext]`; // else if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'].some((ext) => assetInfo.name.endsWith(ext))) {
// } // return `assets/img/[name]-[hash].[ext]`;
// //其他资源输出到assets文件夹 // }
// else { // //其他资源输出到assets文件夹
// return `assets/[name]-[hash].[ext]`; // else {
// } // return `assets/[name]-[hash].[ext]`;
// }, // }
// }, // },
// }, // },
// }, // },
},
}); });