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

update 调整大屏各个模块参数及样式

Browse Source
This commit is contained in:
zk
2024-05-16 15:53:04 +08:00
parent adca7ae65e
commit 45aec85fad
12 changed files with 238 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/body-d-left/bodyLeftHooks.ts
+11 -7
View File
@@ -44,10 +44,10 @@ export function useStatistics() {
}
export const timeTab = [
{
name: '全部',
value: '1',
},
// {
// name: '全部',
// value: '1',
// },
{
name: '本年',
value: '2',
@@ -62,6 +62,10 @@ export const timeTab = [
},
];
export const sexType = [
{
name: '全部',
value: '0',
},
{
name: '男',
value: '2',
@@ -352,7 +356,7 @@ export function barOption(xData, ydata) {
*/
export function allValueEmpty(key: string, list: any[]) {
if (!Array.isArray(list)) {
return false
return false;
}
return list.every((item: any) => item?.[key] != 0)
}
return list.every((item: any) => item?.[key] != 0);
}
src/components/body-d-left/oneL.vue
+29 -11
View File
@@ -12,7 +12,13 @@
>
</div>
<div class="server-container">
<div v-for="(item, index) in statistics" :key="index" class="server-item">
<div
v-for="(item, index) in statistics"
:key="index"
class="server-item"
:class="['gross', 'alerdyreceive'].includes(item.key) ? 'hasCursor' : ''"
@click="handleClick(item)"
>
<span>{{ item?.name }}</span>
<span>{{ item?.value }}</span>
</div>
@@ -23,8 +29,8 @@
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import PublicTitle from '../publicTitle.vue';
import { list } from './left.api';
import PublicTitle from '/@/components/publicTitle.vue';
import { list } from '/@/components/body-d-left/left.api';
import { allValueEmpty, timeTab, useSpin, useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { useDetailStore } from '/@/store/modules/detailData.ts';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
@@ -34,11 +40,15 @@
refreshState: {
type: Boolean,
},
setting: {
type: Object,
},
});
const emit = defineEmits(['handleClick']);
const typeTime = ref(timeTab);
const { statistics, setStatistics, getStatistics } = useStatistics();
const selectIndex = ref(0);
const selectVal = ref('1');
const selectVal = ref('2'); //本年
const { setSpin, spinning } = useSpin();
onMounted(() => {
@@ -51,17 +61,17 @@
async function getList() {
setSpin(true);
try {
const { code, result } = (await list({ condition: selectVal.value })) || {};
setSpin(!spinning.value);
if (code != 200 || !Array.isArray(result)) {
const { code, result } = (await list({ condition: selectVal.value, dataType: props.setting.dataType })) || {};
setSpin(false);
if (code != 200 || !result) {
return;
}
setSession(LEFT_KEY1, JSON.stringify(result[0]));
setValue(result[0]);
setSession(LEFT_KEY1, JSON.stringify(result));
setValue(result);
} catch {
setSpin(false);
const result = JSON.parse(getSession(LEFT_KEY1));
setValue(result);
setSpin(false);
}
}
@@ -80,6 +90,10 @@
getList();
}
function handleClick(item) {
emit('handleClick', item);
}
watch(
() => props.refreshState,
() => {
@@ -110,6 +124,10 @@
font-size: 16px;
padding: 6px 0;
&.hasCursor {
cursor: pointer;
}
span {
display: inline-block;
width: 50%;
@@ -131,4 +149,4 @@
}
}
}
</style>
</style>
src/components/body-d-left/threeL.vue
+8 -38
View File
@@ -6,8 +6,8 @@
<span
v-for="(item, index) in timeTab"
:key="index"
:class="selectIndex === index ? 'select' : 'unSelect'"
@click="handleSelect(index)"
:class="selectIndex === item.value ? 'select' : 'unSelect'"
@click="handleSelect(item.value)"
>{{ item.name }}</span
>
</div>
@@ -20,7 +20,7 @@
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import PublicTitle from '../publicTitle.vue';
import PublicTitle from '/@/components/publicTitle.vue';
import { getDetail } from '/@/components/body-d-left/left.api';
import { useSpin, timeTab, useHospitalList, radarCharts, allValueEmpty } from '/@/components/body-d-left/bodyLeftHooks';
import { useSession, caching } from '/@/hooks/autoRefresh/caching.ts';
@@ -30,14 +30,15 @@
refreshState: {
type: Boolean,
},
setting: Object,
});
const { setSession, getSession } = useSession();
const { LEFT_KEY3 } = caching;
const { setSpin, spinning } = useSpin();
const selectIndex = ref(0);
const selectIndex = ref('2');
function handleSelect(index: number) {
selectIndex.value = index;
function handleSelect(val: string) {
selectIndex.value = val;
setSpin(true);
setTimeout(() => {
setSpin(false);
@@ -115,37 +116,6 @@
width: 100%;
height: 100%;
}
.physical-item {
width: 33%;
height: 46%;
color: #ffffff;
display: flex;
flex-direction: column;
.ct {
margin-top: -20px;
}
.value {
font-size: 20px;
font-weight: bold;
}
.label {
font-size: 14px;
}
}
.b1 {
background: url('../../assets/images/physical-top.png') no-repeat;
background-size: 95% 95%;
}
.b2 {
background: url('../../assets/images/physical-bottom.png') no-repeat;
background-size: 95% 95%;
}
}
}
</style>
</style>
src/components/body-d-left/twoL.vue
+3 -3
View File
@@ -25,7 +25,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import PublicTitle from '../publicTitle.vue';
import PublicTitle from '/@/components/publicTitle.vue';
import * as echarts from 'echarts';
import { complaint, getDepart } from '/@/components/body-d-left/left.api.ts';
import { useSpin, barOption, sexType } from '/@/components/body-d-left/bodyLeftHooks.ts';
@@ -153,7 +153,7 @@
left: 0;
bottom: -12px;
height: 6px;
background: url('../../assets/images/light.png') no-repeat;
background: url('/@/assets/images/light.png') no-repeat;
background-size: 100% 100%;
}
}
@@ -225,4 +225,4 @@
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: #002e64 !important;
}
</style>
</style>
src/components/body-d-right/oneR.vue
+15 -5
View File
@@ -43,7 +43,7 @@
</div>
<div class="con-item">
<span>发生地点：</span>
<span>{{ userInfo?.address }}</span>
<span>{{ userInfo?.address || userInfo?.gpsErrorMsg }}</span>
</div>
</div>
</template>
@@ -59,7 +59,12 @@
import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
import { Map } from '/@/assets/mapUtils/map.ts';
import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
import { DataType } from '/@/utils/settings.ts';
const props = defineProps({
setting: Object,
});
const emit = defineEmits(['emit-view-detail']);
const router = useRouter();
const { setSession, getSession } = useSession();
const { RIGHT_KEY1 } = caching;
@@ -105,7 +110,7 @@
async function getScrollList() {
try {
const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1, orgCode: props.setting?.orgCode });
if (code == 200) {
setSession(RIGHT_KEY1, JSON.stringify(result.records));
scrollList.value = result.records;
@@ -125,7 +130,12 @@
}
function viewDetail() {
router.push({ path: '/secondScreen' });
if (props.setting.dataType == DataType.xian) {
router.push({ path: '/secondScreen' });
}
if (props.setting.dataType == DataType.yinChuan) {
emit('emit-view-detail');
}
}
</script>
<style scoped lang="less">
@@ -222,7 +232,7 @@
<style lang="less">
.dialog-con {
background-color: #00152b;
border: 1px solid #129bff;
//border: 1px solid #129bff;
/*
antd表格样式
*/
@@ -268,4 +278,4 @@ antd表格样式
background-color: rgba(30, 115, 194, 0.3);
}
}
</style>
</style>
src/components/body-d-right/threeR.vue
+4 -4
View File
@@ -10,7 +10,7 @@
</div>
</template>
<script setup lang="ts">
import PublicTitle from '../publicTitle.vue';
import PublicTitle from '/@/components/publicTitle.vue';
</script>
<style scoped lang="less">
.inner {
@@ -37,8 +37,8 @@
position: absolute;
content: attr(data-text);
color: #fff;
bottom: 0px;
left: 0px;
bottom: 0;
left: 0;
width: 100%;
text-align: left;
padding-left: 10px;
@@ -60,4 +60,4 @@
background-size: 100% 100%;
}
}
</style>
</style>
src/components/body-d-right/twoR.vue
+2 -2
View File
@@ -7,7 +7,7 @@
<script setup lang="ts">
import { ref, unref, onMounted } from 'vue';
import * as echarts from 'echarts';
import PublicTitle from '../publicTitle.vue';
import PublicTitle from '/@/components/publicTitle.vue';
import { getHealthDataList } from '/@/components/body-d-right/right.api';
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
@@ -59,4 +59,4 @@
margin: 0 auto;
height: calc(100% - 40px);
}
</style>
</style>
src/components/dialog/Dialog.vue
+5 -2
View File
@@ -28,6 +28,9 @@
<style lang="less">
.dialog {
border: 1px solid #0a50a0;
background-color: #00152b;
.ant-modal-title {
position: relative;
display: flex;
@@ -68,7 +71,7 @@
}
.ant-modal-wrap {
background-color: rgba(0, 0, 0, 0.6);
//background-color: rgba(0, 0, 0, 0.6);
}
}
</style>
</style>
src/views/components/emergencyDialog.vue
+2 -2
View File
@@ -45,7 +45,7 @@
.police-con {
color: #ffffff;
background-color: #00152b;
border: 1px solid #129bff;
//border: 1px solid #129bff;
padding: 2% 0 2% 5%;
.sub-text {
@@ -72,4 +72,4 @@
}
}
}
</style>
</style>
src/views/components/employeeDialog.vue
+3 -3
View File
@@ -26,7 +26,7 @@
</div>
<div class="con-item">
<span>发生地点：</span>
<span>{{ userInfo?.address }}</span>
<span>{{ userInfo?.address || userInfo?.gpsErrorMsg }}</span>
</div>
</div>
</template>
@@ -57,7 +57,7 @@
.police-con {
color: #ffffff;
background-color: #00152b;
border: 1px solid #129bff;
//border: 1px solid #129bff;
padding: 2% 0 2% 5%;
.sub-text {
@@ -84,4 +84,4 @@
}
}
}
</style>
</style>
src/views/components/phoneDialog/phoneDialog.vue
+119
View File
@@ -0,0 +1,119 @@
<template>
<Dialog :openVis="visible" width="50%" :title="title" @close="closeDialog" :maskClosable="false">
<template #container>
<div v-if="useForm" class="form-container">
<Form :model="formRecord" :label-width="100" v-bind="formItemLayout">
<a-form-item label="性别">
<a-select v-model:value="formRecord.sex" placeholder="请选择" :options="sexTypeList"></a-select>
</a-form-item>
</Form>
</div>
<BasicTable
ref="registerTable"
class="table-container"
:key="visible"
:columns="columns"
:api="getPhoneList"
:apiParams="formState"
></BasicTable>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue';
import Dialog from '/@/components/dialog/Dialog.vue';
import { useDialog } from '/@/views/components/dialogHooks.ts';
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
import { Form } from 'ant-design-vue';
import { SexType, sexTypeList } from '/@/utils/settings.ts';
import { getPhoneList } from '/@/views/yinChuan/yinChuan.api.ts';
const props = defineProps({
record: Object,
title: String,
useForm: Boolean,
labelCol: Object,
wrapperCol: Object,
setting: Object,
phoneType: String,
});
const formItemLayout = {
labelCol: {
style: { width: '100px' },
...props.labelCol,
},
wrapperCol: {
span: 6,
...props.wrapperCol,
},
};
const columns = [
{
title: '姓名',
dataIndex: 'realName',
key: 'realName',
},
{
title: '单位',
dataIndex: 'departName',
key: 'departName',
},
{
title: '部门',
dataIndex: 'orgName',
key: 'orgName',
},
{
title: '性别',
dataIndex: 'sex_dictText',
key: 'sex_dictText',
},
{
title: '时间',
dataIndex: 'time',
key: 'time',
},
{
title: '电话',
dataIndex: 'phone',
key: 'phone',
},
];
const formRecord = ref({
sex: SexType.all,
});
const formState = computed(() => ({
...formRecord.value,
dataType: props.setting.dataType,
phoneType: props.phoneType,
showType: '0',
}));
const { visible, title, closeDialog, openDialog } = useDialog({ title: props.title });
const registerTable = ref();
watch(
props,
() => {
registerTable.value?.getRecords();
}
// {
// immediate: true,
// }
);
defineExpose({
openDialog,
});
</script>
<style scoped lang="less">
.form-container {
margin: 10px 0;
}
.table-container {
margin: 0 10px;
}
:deep(.ant-form-item-label) > label {
color: #fff;
}
</style>
src/views/index.vue
+37 -12
View File
@@ -9,7 +9,7 @@
</div>
<div class="body-d">
<div class="body-d-left">
<one-l :refreshState="refreshState" />
<one-l :setting="setting" :refreshState="refreshState" @handleClick="handlePhoneDialog" />
<two-l :refreshState="refreshState" />
<three-l :refreshState="refreshState" />
</div>
@@ -17,7 +17,7 @@
<china-map />
</div>
<div class="body-d-right">
<one-r :refreshState="refreshState" />
<one-r :setting="setting" :refreshState="refreshState" />
<two-r :refreshState="refreshState" />
<three-r :key="refreshState" />
</div>
@@ -25,28 +25,32 @@
<div class="bottom-d"></div>
<EmployeeDialog ref="employeeDialogRef" :record="socketData" />
<EmergencyDialog ref="emergencyDialogRef" :record="emergencyData" />
<PhoneDialog ref="phoneDialogRef" :title="phoneDialogTitle" :useForm="true" :setting="setting" :phoneType="phoneType" />
</div>
</template>
<script setup lang="ts">
import { onUnmounted, ref, watch, nextTick } from 'vue';
import OneL from '../components/body-d-left/oneL.vue';
import TwoL from '../components/body-d-left/twoL.vue';
import ThreeL from '../components/body-d-left/threeL.vue';
import OneR from '../components/body-d-right/oneR.vue';
import TwoR from '../components/body-d-right/twoR.vue';
import ThreeR from '../components/body-d-right/threeR.vue';
import ChinaMap from '../components/chinaMap/chinaMap.vue';
import OneL from '/@/components/body-d-left/oneL.vue';
import TwoL from '/@/components/body-d-left/twoL.vue';
import ThreeL from '/@/components/body-d-left/threeL.vue';
import OneR from '/@/components/body-d-right/oneR.vue';
import TwoR from '/@/components/body-d-right/twoR.vue';
import ThreeR from '/@/components/body-d-right/threeR.vue';
import ChinaMap from '/@/components/chinaMap/chinaMap.vue';
import EmployeeDialog from '/@/views/components/employeeDialog.vue';
import EmergencyDialog from '/@/views/components/emergencyDialog.vue';
import { useTopTime } from '/@/utils/utils.ts';
import { basicPath, emergencyPath, useSocket } from '/@/utils/socket.ts';
import { useRefresh } from '/@/hooks/autoRefresh';
import { DEFAULT_TIME } from '/@/hooks/autoRefresh/pageRefreshTime.ts';
import { DataType, getSettings } from '/@/utils/settings.ts';
import PhoneDialog from '/@/views/components/phoneDialog/phoneDialog.vue';
const { refreshState } = useRefresh(DEFAULT_TIME);
const dayTimeO = ref();
const dayTimeT = ref();
const interval = ref(1);
const setting = getSettings(DataType.xian);
function init() {
getTime();
@@ -98,6 +102,27 @@
clearInterval(interval.value);
});
const phoneDialogTitle = ref('呼入电话');
const phoneDialogRef = ref();
//0:处置 1:处理 2:呼入 3:全部
const phoneType = ref('');
//呼入电话、受理电话弹窗
function handlePhoneDialog(item) {
const { name, key } = item;
nextTick(() => {
//呼入电话
if (key == 'gross') {
phoneType.value = '2';
}
//受理电话
if (key == 'alerdyreceive') {
phoneType.value = '1';
}
phoneDialogTitle.value = name;
phoneDialogRef.value.openDialog();
});
}
// function test() {
// let nVal = {
@@ -134,7 +159,7 @@
.outer {
height: 100%;
box-sizing: border-box;
background: url('../assets/images/bg.png') no-repeat;
background: url('/@/assets/images/bg.png') no-repeat;
background-size: 100% 100%;
}
@@ -143,7 +168,7 @@
line-height: 80px;
display: flex;
padding-bottom: 9px;
background: url('../assets/images/top-title.png') no-repeat;
background: url('/@/assets/images/top-title.png') no-repeat;
background-size: 100% 100%;
.title-d-left,
@@ -212,4 +237,4 @@
background: url('../assets/images/bottom-b.png') no-repeat;
background-size: 100% 100%;
}
</style>
</style>