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";
html, body, #app {
min-width: 1300px;
overflow-x: auto;
min-width: 1300px;
overflow-x: auto;
}
.type-time {
padding-top: 3%;
font-size: 16px;
display: flex;
justify-content: right;
span {
padding: 0 2%;
cursor: pointer;
}
.select.dark {
color: var(--typeTimeSelectColor);
position: relative;
&:after {
content: '';
position: absolute;
display: block;
width: 72%;
left: 6px;
bottom: -12px;
height: 6px;
background: url('/@/assets/images/light.png') no-repeat;
background-size: 100% 100%;
}
}
.unSelect.dark {
color: var(--typeTimeUnSelectColor);
}
.select.light {
color: #5876DB;
background-color: #BDC9F5;
position: relative;
margin-left: 5px;
border: 1px solid #607DDB;
border-radius: 5px;
}
.unSelect.light {
background-color: #d2d7f7;
margin-left: 5px;
color: #889BDB;
border: 1px solid #BDC9F5;
border-radius: 5px;
}
padding-top: 3%;
font-size: 16px;
display: flex;
justify-content: right;
span {
padding: 0 2%;
cursor: pointer;
}
.select.dark {
color: var(--typeTimeSelectColor);
position: relative;
&:after {
content: '';
position: absolute;
display: block;
width: 72%;
left: 6px;
bottom: -12px;
height: 6px;
background: url('/@/assets/images/light.png') no-repeat;
background-size: 100% 100%;
}
}
.unSelect.dark {
color: var(--typeTimeUnSelectColor);
}
.select.light {
color: #5876DB;
background-color: #BDC9F5;
position: relative;
margin-left: 5px;
border: 1px solid #607DDB;
border-radius: 5px;
}
.unSelect.light {
background-color: #d2d7f7;
margin-left: 5px;
color: #889BDB;
border: 1px solid #BDC9F5;
border-radius: 5px;
}
}
.type-check {
.select.light {
color: #5876DB;
background-color: #BDC9F5;
position: relative;
margin-left: 5px;
border: 1px solid #607DDB;
border-radius: 5px;
}
.unSelect.light {
background-color: #d2d7f7;
margin-left: 5px;
color: #889BDB;
border: 1px solid #BDC9F5;
border-radius: 5px;
}
.select.light {
color: #5876DB;
background-color: #BDC9F5;
position: relative;
margin-left: 5px;
border: 1px solid #607DDB;
border-radius: 5px;
}
.unSelect.light {
background-color: #d2d7f7;
margin-left: 5px;
color: #889BDB;
border: 1px solid #BDC9F5;
border-radius: 5px;
}
}
*::-webkit-scrollbar {
width: 12px;
height: 12px;
width: 12px;
height: 12px;
}
*::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
width: 0;
height: 0;
display: none;
}
*::-webkit-scrollbar-corner {
background-color: transparent;
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
height: 6px;
border-radius: 25px;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.3);
border: 4px solid rgba(0, 0, 0, 0);
height: 6px;
border-radius: 25px;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.3);
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ant-modal-mask {
background-color: rgba(0, 0, 0, 0.65) !important;
background-color: rgba(0, 0, 0, 0.65) !important;
}
// 下拉框样式-start
.ant-select {
color: var(--antSelectFontColor) !important;
background-color: var(--antSelectBg);
color: var(--antSelectFontColor) !important;
background-color: var(--antSelectBg);
}
.ant-select-dropdown {
background-color: var(--antSelectDropdownBg) !important;
border: 1px solid var(--antSelectDropdownBorderColor);
border-top: none;
background-color: var(--antSelectDropdownBg) !important;
border: 1px solid var(--antSelectDropdownBorderColor);
border-top: none;
}
.ant-select-item {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
//框背景色
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
color: var(--antSelectFontColor) !important;
background-color: transparent !important;
border: 1px solid var(--antSelectDropdownBorderColor) !important;
color: var(--antSelectFontColor) !important;
background-color: transparent !important;
border: 1px solid var(--antSelectDropdownBorderColor) !important;
}
.ant-select-item-option-selected {
color: #ffffff !important;
color: #ffffff !important;
}
// 选中字体颜色
:deep(.ant-select-selection-item) {
color: var(--antSelectFontColor);
color: var(--antSelectFontColor);
}
.ant-select-item-option-active {
background-color: transparent !important;
background-color: transparent !important;
}
.ant-select-item-option-active:hover {
background-color: var(--antSelectItemActive) !important;
background-color: var(--antSelectItemActive) !important;
}
// 箭头颜色
.ant-select-arrow {
color: var(--antSelectDropdownBorderColor) !important;
color: var(--antSelectDropdownBorderColor) !important;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: var(--antSelectItemActive) !important;
background-color: var(--antSelectItemActive) !important;
}
// 下拉框样式-end
// 级联选择器样式-start
.ant-cascader-menu-item {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
.ant-cascader-menu-item:hover {
background-color: var(--antSelectItemActive) !important;
background-color: var(--antSelectItemActive) !important;
}
.ant-cascader-menu-item-active {
color: var(--antSelectFontColor) !important;
background-color: var(--antSelectItemActive) !important;
color: var(--antSelectFontColor) !important;
background-color: var(--antSelectItemActive) !important;
}
.ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
// 级联选择器样式-end
.ant-empty-description {
color: var(--antSelectFontColor);
color: var(--antSelectFontColor);
}
//空表格hover白色
.ant-table-tbody > tr.ant-table-placeholder:hover > td {
background: transparent !important;
background: transparent !important;
}
//直升机
.helicopter {
width: 60px;
height: 37px;
background: url("/@/assets/img/helicopter.png") no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
width: 60px;
height: 37px;
background: url("/@/assets/img/helicopter.png") no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
}
//Modal
.dialog.light {
background-color: #f3f5ff;
.police-con {
color: var(--tableFontColor);
background-color: #f3f5ff;
}
.ant-modal-title {
color: #576BAD !important;
background: url('/@/assets/images/dialog-light.png') no-repeat;
background-size: 100% 100%;
}
background-color: #f3f5ff;
.police-con {
color: var(--tableFontColor);
background-color: #f3f5ff;
}
.ant-modal-title {
color: #576BAD !important;
background: url('/@/assets/images/dialog-light.png') no-repeat;
background-size: 100% 100%;
}
}
.dialog.dark {
color: #ffffff;
background-color: #00152b;
.police-con {
color: #ffffff;
background-color: #00152b;
}
.ant-modal-title {
color: #ffffff !important;
background: url('/@/assets/images/dialog.png') no-repeat;
background-size: 100% 100%;
}
color: #ffffff;
background-color: #00152b;
.police-con {
color: #ffffff;
background-color: #00152b;
}
.ant-modal-title {
color: #ffffff !important;
background: url('/@/assets/images/dialog.png') no-repeat;
background-size: 100% 100%;
}
}
/*表单*/
: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: {
top: '18%',
left: '8%',
right: '8%',
right: '4%',
bottom: '15%',
},
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',
getDetail = '/health-medical/medical/hospital/getMedicalHospital',
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 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>
<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="title">
<div class="type-all">
@@ -37,6 +39,7 @@
type: Boolean,
},
});
const emit = defineEmits(['viewDetail']);
const { themeType } = useTheme();
const { setSession, getSession } = useSession();
const { LEFT_KEY2 } = caching;
@@ -114,8 +117,30 @@
myChart.resize();
});
}
/**
* 查看详情
*/
function viewDetail() {
emit('viewDetail');
}
</script>
<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 {
position: relative;
width: 100%;
src/components/dialog/Dialog.vue
+6 -1
View File
@@ -38,6 +38,7 @@
.dialog {
border: 1px solid #0a50a0;
background-color: #00152b;
padding-bottom: 0;
.ant-modal-title {
position: relative;
@@ -68,10 +69,14 @@
padding: 0 !important;
}
.ant-modal-close-x,
.anticon {
color: #999999 !important;
height: 40px;
}
.ant-modal-close-x {
color: #999999 !important;
height: 40px;
line-height: 40px;
}
src/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue
+5 -1
View File
@@ -73,7 +73,6 @@
async function getRecords() {
try {
dataSource.value = [];
tableLoading.value = true;
const { code, result } = await props.api({ ...props.apiParams, pageSize: pageSize.value, pageNo: current.value });
if (code == 200) {
@@ -85,6 +84,9 @@
paginationProp.value = { ...paginationProp.value, ...result };
paginationProp.value.pageSize = result.size;
}
} catch (e) {
dataSource.value = [];
tableLoading.value = false;
} finally {
tableLoading.value = false;
}
@@ -114,6 +116,7 @@
border-top: 1px solid var(--tableHeadBg) !important;
border-bottom: none;
padding: 9px 9px;
text-align: center;
}
:deep(.ant-table-cell-scrollbar) {
@@ -141,6 +144,7 @@
background-color: var(--tableRowBg) !important;
border-bottom: 1px solid var(--tableRowBorder);
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) {
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>
<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
+15 -1
View File
@@ -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 {
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
include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
},
// build: {
// rollupOptions: {
// output: {
// //入口文件输出配置
// entryFileNames: `assets/js/[name]-[hash].js`,
// //代码分割后的文件输出配置
// chunkFileNames: `assets/js/[name]-[hash].js`,
// //静态资源输出配置
// assetFileNames(assetInfo) {
// //css文件单独输出到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))) {
// return `assets/img/[name]-[hash].[ext]`;
// }
// //其他资源输出到assets文件夹
// else {
// return `assets/[name]-[hash].[ext]`;
// }
// },
// },
// },
// },
build: {
sourcemap: false,
// rollupOptions: {
// output: {
// //入口文件输出配置
// entryFileNames: `assets/js/[name]-[hash].js`,
// //代码分割后的文件输出配置
// chunkFileNames: `assets/js/[name]-[hash].js`,
// //静态资源输出配置
// assetFileNames(assetInfo) {
// //css文件单独输出到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))) {
// return `assets/img/[name]-[hash].[ext]`;
// }
// //其他资源输出到assets文件夹
// else {
// return `assets/[name]-[hash].[ext]`;
// }
// },
// },
// },
},
});