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
2023-12-12 14:24:48 +08:00
parent c5e1dd5d19
commit 825d10fc35
8 changed files with 367 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/img/watch.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

src/assets/less/index.less
+6
View File
@@ -57,6 +57,12 @@
background-color: rgba(0, 0, 0, 0.3);
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ant-select-dropdown {
background-color: #00152b !important;
border-right: 1px solid #1b7ef2;
src/assets/mapUtils/commonFun.ts
+1 -1
View File
@@ -35,7 +35,7 @@ export function typeToIcon(type: string) {
return createIcon({ icon: mapIcon3, iconSize, imageSize });
}
if (type == '6') {
return createIcon({ icon: watchIcon, iconSize: [21, 44], imageSize: [21, 44] });
return createIcon({ icon: watchIcon, iconSize: [23, 51], imageSize: [23, 51] });
}
}
src/components/dialog/Dialog.vue
+2
View File
@@ -35,6 +35,7 @@
width: 100%;
height: 40px;
background: url('../../assets/images/dialog.png') no-repeat;
background: rgba(0, 0, 0, 0.6);
background-size: 100% 100%;
color: #ffffff !important;
padding-left: 2%;
@@ -43,6 +44,7 @@
.ant-modal-header {
padding: 0 !important;
padding-bottom: 0;
border-bottom: none;
}
.ant-modal-header,
src/components/secondaryScreen/secondMap/components/watchListDialog.vue
+282
View File
@@ -0,0 +1,282 @@
<template>
<Dialog :openVis="visible" width="65%" title="健康终端报警列表" @close="closeModal">
<template #container>
<div class="dialog-con">
<a-table
class="ant-table-striped"
:dataSource="dataSource"
:columns="columns"
:scroll="{ y: '56vh' }"
:pagination="paginationProp"
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
>
</a-table>
</div>
</template>
</Dialog>
</template>
<script setup lang="ts">
import Dialog from '/@/components/dialog/Dialog.vue';
import { ref } from 'vue';
//分页相关
const current = ref(1);
const pageSize = ref(10);
const total = ref(0);
const paginationProp = ref({
showSizeChanger: true,
pageSizeOptions: ['10', '30', '50'],
pageSize,
current,
total,
showTotal: (total) => `总 ${total} 条`,
onChange: pageChange,
});
function pageChange(page, pageS) {
// debugger;
current.value = page;
pageSize.value = pageS;
}
const dataSource = ref([
{
key: '1',
name: '胡彦斌1',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖2',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '3',
name: '胡彦祖3',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '4',
name: '胡彦祖4',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '5',
name: '胡彦祖5',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '6',
name: '胡彦祖6',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '7',
name: '胡彦祖7',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '8',
name: '胡彦祖8',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '9',
name: '胡彦祖9',
age: 42,
address: '西湖区湖底公园1号',
},
{
key: '10',
name: '胡彦祖10',
age: 42,
address: '西湖区湖底公园1号',
},
]);
const columns = ref([
{
title: '员工名称',
dataIndex: 'name',
align: 'center',
key: 'name',
},
{
title: '单位名称',
dataIndex: 'age',
align: 'center',
key: 'age',
},
{
title: '部门名称',
dataIndex: 'address',
align: 'center',
key: 'address',
},
{
title: '工具编码',
dataIndex: 'address1',
align: 'center',
key: 'address1',
},
{
title: '心率（次/分）',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '血氧（%）',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '压力',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '睡眠',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '体温（℃）',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '锻炼（千卡）',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
{
title: '步数（米）',
dataIndex: 'address2',
align: 'center',
key: 'address2',
},
]);
const visible = ref(true);
function openModal() {
console.log('1');
visible.value = true;
}
function closeModal() {
visible.value = false;
}
defineExpose({
openModal,
closeModal,
});
</script>
<style scoped lang="less">
.dialog-con {
background-color: #00152b;
border: 1px solid #129bff;
min-height: 500px;
}
:deep(.ant-table-thead > tr > th) {
color: #fff !important;
background: rgba(35, 132, 221, 0.5) !important;
border-top: 1px solid #1d4e7c !important;
border-bottom: none;
padding: 9px 9px;
}
:deep(.ant-table-cell-scrollbar) {
box-shadow: none !important;
}
:deep(.ant-table) {
color: #fff;
background-color: transparent;
pointer-events: none;
}
:deep(.ant-table-tbody > tr > td) {
border-bottom: none;
padding: 0px 4px;
}
:deep(.ant-table-row:hover) {
background-color: transparent;
color: #ffffff;
}
.ant-table-striped :deep(.table-default) td,
.ant-table-striped :deep(.table-striped) td {
background-color: #00152b;
border-bottom: 1px solid #2384dd;
}
//#00152b
// 分页
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
background-color: #1f2935;
color: #8291a9;
border: none;
}
:deep(.ant-pagination-item) {
background-color: #1f2935;
color: #ffffff;
border: none;
}
// 当前页选中的样式
:deep(.ant-pagination-item-active) {
background-color: #0081ff;
}
:deep(.ant-pagination-item-active a) {
color: #ffffff;
}
:deep(.ant-pagination-item a),
:deep(.ant-pagination-total-text) {
color: #ffffff;
}
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
color: #ffffff;
background-color: #1f2935;
}
// 省略样式
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
color: #ffffff;
}
// 省略鼠标移入样式
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
color: rgba(255, 255, 255, 0.4);
}
// 下一页
:deep(.ant-pagination-next .ant-pagination-item-link) {
background-color: #1f2935;
color: #8291a9;
border: none;
}
:deep(.ant-table-pagination-right) {
margin-right: 10px !important;
}
</style>
src/components/secondaryScreen/secondMap/secondMap.vue
+54 -16
View File
@@ -10,17 +10,23 @@
</div>
<div v-show="false" id="container"></div>
<div v-show="false" id="panel"></div>
<div class="footer-data" v-show="true">
<div class="footer-data" v-show="isShow" style="--moveUp: 50px; --moveDown: -90px" :class="className">
<div class="empty-png"></div>
<div class="col-item" v-for="item in footerList">
<div
class="col-item nowrap"
v-for="item in footerList"
:style="{ cursor: item.key == 'allotDeviceNum' ? 'pointer' : 'default' }"
@click="openWatchList(item)"
>
<div class="col-text">{{ item?.name }}</div>
<div class="col-value">{{ item?.value }}</div>
<div class="col-value nowrap" :title="item.value">{{ item?.value }}</div>
</div>
</div>
<div class="footer-dialog-con" v-show="false" :class="show ? 'slide-top' : 'slide-bottom'">
<div class="footer-dialog-con" style="--moveUp: 50px; --moveDown: -50px" :class="show ? 'slide-top' : 'slide-bottom'" v-show="false">
<FooterDialog></FooterDialog>
</div>
</div>
<WatchListDialog ref="watchDialogRef"></WatchListDialog>
</div>
</template>
<script lang="ts" setup>
@@ -28,9 +34,9 @@
import { message } from 'ant-design-vue';
import { Map } from '/@/assets/mapUtils/map';
import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
import { useFooterTable } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
import WatchListDialog from '/@/components/secondaryScreen/secondMap/components/watchListDialog.vue';
import { useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
import { footerApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
import { getToday } from '/@/utils/utils.ts';
const show = ref(false);
@@ -43,26 +49,27 @@
type: String,
});
async function getMapData(type, params = {}) {}
const markerList = [
{
lon: 109.42,
lat: 33.9,
type: '6',
name: '第一采油厂',
count: 20,
},
{
lon: 106.59,
lat: 34.93,
type: '6',
name: '第二采油厂',
count: 40,
},
{
lon: 109.42,
lat: 31.9,
type: '6',
name: '第三采油厂',
count: 60,
},
];
onMounted(() => {
@@ -70,6 +77,9 @@
getFooterTable();
});
// 底部表格
const { isShow, className, setIsShow } = useMoveClass();
function init() {
Map.initMap({ el: 'mapContainer' });
Map.createOverlay(
@@ -87,14 +97,45 @@
},
(val) => {
console.log('info', val);
const obj = {
id: '1731587716383043586',
orgCode: 'A01A01',
orgCodeLeaf: 'A01A01A01',
userCount: 4 + Math.random() * 4,
deviceNum: 0,
allotDeviceNum: Math.random() * 4,
sevenDayNum: 1 + Math.random() * 4,
fourteenDayNum: 1 + Math.random() * 4,
heartRateErrorNum: Math.random() * 4,
spoErrorNum: Math.random() * 4,
stressErrorNum: Math.random() * 4,
tempErrorNum: Math.random() * 4,
dataDate: '2023-12-04 00:00:00',
orgName: '安全环保监督部',
deptName: '定边监督站',
};
setIsShow(true);
setFooterList(obj);
}
);
}
const watchDialogRef = ref();
function openWatchList(item) {
if (item.key == 'allotDeviceNum') {
watchDialogRef.value.openModal();
}
}
const { footerList, setFooterList } = useFooterTable();
watch(props, () => {
getFooterTable();
});
watch(
() => props.orgCode,
() => {
setIsShow(false);
// getFooterTable();
}
);
async function getFooterTable() {
const params = {
@@ -130,7 +171,7 @@
}
.mapContainer {
height: 100%;
height: calc(100% + 20px);
margin: 10px 0;
}
@@ -138,7 +179,7 @@
position: absolute;
left: 0;
right: 0;
bottom: 0;
bottom: var(--moveDown);
display: flex;
z-index: 999;
@@ -171,9 +212,6 @@
}
}
--moveUp: 50px;
--moveDown: -50px;
.footer-dialog-con {
position: absolute;
left: 0;
src/components/secondaryScreen/secondMap/secondMapHooks.ts
+18 -1
View File
@@ -88,7 +88,7 @@ export function useFooterTable() {
{
name: '佩戴手表人数',
value: '',
key: 'allotDeviceNum'
key: 'allotDeviceNum',
},
{
name: '近一周活跃人数',
@@ -123,4 +123,21 @@ export function useFooterTable() {
footerList,
setFooterList
}
}
export function useMoveClass() {
const isShow = ref(false)
const className = ref('slide-bottom')
function setIsShow(type: boolean) {
isShow.value = type
className.value = type ? 'slide-top' : 'slide-bottom'
}
return {
isShow,
className,
setIsShow
}
}