lcw/xzlz_JczWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
Esacpe
2025-12-04 03:09:29 +08:00
parent d7527e291a
commit 20a3b8d2b1
10 changed files with 499 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/api/mosty-jcz.js
View File

@ -738,3 +738,48 @@ export const feignQueryById = (params) => {
});
};
// 人员轨迹查询
export const RyGjTrajectory = (params) => {
return request({
url: api + "/tbJczRyGj/trajectory",
method: "get",
params
});
};
// 人员轨迹CRUD
export const RyGjSelectPage = (params) => {
return request({
url: api + "/tbJczRyGj/selectPage",
method: "get",
params
});
};
export const RyGjQueryById = (params) => {
return request({
url: api + "/tbJczRyGj/queryById",
method: "get",
params
});
};
export const RyGjInsertEntity = (data) => {
return request({
url: api + "/tbJczRyGj/insertEntity",
method: "post",
data
});
};
export const RyGjEditEntity = (data) => {
return request({
url: api + "/tbJczRyGj/editEntity",
method: "post",
data
});
};
export const RyGjDeleteById = (id) => {
return request({
url: api + `/tbJczRyGj/deleteById/${id}`,
method: "delete"
});
};

4
src/components/GdMap/index copy.vue
View File

@ -1,8 +1,8 @@
<template>
<div :id="mapid" class="map"></div>
<div class="changeMap_box" v-if="props.isShow">
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
<!-- <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" /> -->
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
<el-carousel-item>
<div class="mapImageItem">

108
src/components/GdMap/index.vue
View File

@ -1,8 +1,7 @@
<template>
<div :id="mapid" class="map"></div>
<div class="changeMap_box" v-if="props.isShow">
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况"
style="--el-switch-color: #13ce66; --el-switch-off-color: #ff4949" />
<!-- <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" /> -->
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
<el-carousel-item>
<div class="mapImageItem">
@ -31,7 +30,8 @@
</el-carousel> -->
<!-- 地图缩放 -->
<div class="zoomTargetBox">
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom"></el-input-number>
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
</el-input-number>
</div>
</div>
</template>
@ -71,18 +71,11 @@ const props = defineProps({
type: Boolean,
default: false
},
minZoom: {
type: Number,
default: 7
},
maxZoom: {
type: Number,
default: 18
},
});
try {
const userInfo = getItem("deptId")[0].deptCode;
} catch (error) { }
} catch (error) {}
let map;
let mapLayer;
let mapLayer1;
@ -96,37 +89,66 @@ onMounted(() => {
map = new EliMap({
id: props.mapid,
crs: "EPSG:4490",
crs: "EPSG:3857",
style: {
glyphs: "./fonts/{fontstack}/{range}.pbf",
center: [94.36057012, 29.64276831],
zoom: 15
center: [94.36,29.65],
zoom: 11
},
minZoom: props.minZoom,
maxZoom: props.maxZoom,
minZoom: 7,
maxZoom: 18,
transformRequest: (url) => {
if (url.indexOf("TileMatrix=") != -1) {
const arr = url.split("TileMatrix=");
const arr1 = arr[1].split("&");
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
}
}
});
window.map = map;
map.mapboxGLMap.on("load", () => {
map.addWMTSLayer(
"/PGIS_S_TileMapServer/Maps/XZDJ_DJ/EzMap"
,
{
Service: "getImage",
Type: "RGB",
ZoomOffset: "0",
V: "0.3",
Zoom: "{z}",
Row: "{y}",
Col: "{x}"
},
{
tileSize: 300
}
);
map.addGaudLayer({
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
})
zoomTarget.value = map.mapboxGLMap.getZoom();
// 地图加载完成后发出事件
// emit('mapLoaded')
});
mapUtil.value = new MapUtil(map);
// map = new EliMap({
// id: props.mapid,
// crs: "EPSG:4490",
// style: {
// glyphs: "./fonts/{fontstack}/{range}.pbf",
// center: [94.36057012, 29.64276831],
// zoom: 15
// },
// minZoom: 7,
// maxZoom: 18,
// });
// window.map = map;
// map.mapboxGLMap.on("load", () => {
// map.addWMTSLayer(
// "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
// ,
// {
// Service: "getImage",
// Type: "RGB",
// ZoomOffset: "0",
// V: "0.3",
// Zoom: "{z}",
// Row: "{y}",
// Col: "{x}"
// },
// {
// tileSize: 300
// }
// );
// zoomTarget.value = map.mapboxGLMap.getZoom();
// });
// mapUtil.value = new MapUtil(map);
mapUtil.value.Drawplot(); //初始化加载绘制工具
// 设置地图中心点及图层
@ -267,6 +289,7 @@ const mapSetLayer = (id, source) => {
//获取地图绘制的数据
const resFun = (coord, type, flag, data) => {
emitter.emit("coordString", {
coord: coord,
type: type,
@ -280,6 +303,12 @@ const handleZoom = (val) => {
map.mapboxGLMap.setZoom(val);
};
emitter.on("map-resize", () => {
if (map && map.mapboxGLMap) {
map.mapboxGLMap.resize();
}
});
// 是否打开或者关闭路况
const handleSwitch = (val) => {
if (val) {
@ -309,6 +338,7 @@ onUnmounted(() => {
emitter.off("diffusionCircle");
emitter.off("SsCircle");
emitter.off("ClearssCircle");
emitter.off("map-resize");
});
</script>
@ -331,35 +361,29 @@ onUnmounted(() => {
right: 398px;
bottom: 4px;
z-index: 9;
.mapImageItem {
border: 1px solid #08aae8;
background: rgb(9, 26, 70);
&>img {
& > img {
width: 100%;
height: 50px;
}
&>div {
& > div {
text-align: center;
position: relative;
top: -3px;
}
}
.zoomTargetBox {
margin-top: 10px;
margin-left: 23px;
}
::v-deep .el-input-number__decrease,
::v-deep .el-input-number__increase {
background: #133362;
color: #fff;
border: none;
}
::v-deep .el-input__inner {
background: #0c1641;
}

58
src/components/GdMap/indexn.vue
View File

@ -1,7 +1,7 @@
<template>
<div :id="mapid" class="map"></div>
<div class="changeMap_box" v-if="props.isShow">
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
<!-- <el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" /> -->
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
<el-carousel-item>
<div class="mapImageItem">
@ -108,47 +108,27 @@ onMounted(() => {
});
window.map = map;
map.mapboxGLMap.on("load", () => {
map.addGaudLayer({
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
})
map.mapboxGLMap.on("load", () => {
map.addWMTSLayer(
"/PGIS_S_TileMapServer/Maps/XZDJ_DJ/EzMap"
,
{
Service: "getImage",
Type: "RGB",
ZoomOffset: "0",
V: "0.3",
Zoom: "{z}",
Row: "{y}",
Col: "{x}"
},
{
tileSize: 300
}
);
zoomTarget.value = map.mapboxGLMap.getZoom();
// 地图加载完成后发出事件
// emit('mapLoaded')
});
mapUtil.value = new MapUtil(map);
// map = new EliMap({
// id: props.mapid,
// crs: "EPSG:4490",
// style: {
// glyphs: "./fonts/{fontstack}/{range}.pbf",
// center: [94.36057012, 29.64276831],
// zoom: 15
// },
// minZoom: 7,
// maxZoom: 18,
// });
// window.map = map;
// map.mapboxGLMap.on("load", () => {
// map.addWMTSLayer(
// "/PGIS_S_TileMapServer/Maps/XZDJ_SL/EzMap"
// ,
// {
// Service: "getImage",
// Type: "RGB",
// ZoomOffset: "0",
// V: "0.3",
// Zoom: "{z}",
// Row: "{y}",
// Col: "{x}"
// },
// {
// tileSize: 300
// }
// );
// zoomTarget.value = map.mapboxGLMap.getZoom();
// });
// mapUtil.value = new MapUtil(map);
mapUtil.value.Drawplot(); //初始化加载绘制工具
// 设置地图中心点及图层

2
src/components/aboutTable/MyTable.vue
View File

@ -16,7 +16,7 @@
:load="load"
:tree-props="treePros"
style="width: 100%"
:header-cell-class-name="() => '街面警情统计HeadBgColor'"
:show-header="true"
:highlight-current-row="getConfiger.showSelectType === 'radio'"
:row-style="{
height:

11
src/router/index.js
View File

@ -339,6 +339,17 @@ export const publicRoutes = [
icon: "article"
}
}
,
{
path: "/TrackPerson",
name: "TrackPerson",
component: () =>
import("@/views/backOfficeSystem/peopleManag/TrackPerson/index"),
meta: {
title: "人员轨迹",
icon: "article"
}
}
]
},
{

5
src/views/backOfficeSystem/peopleManag/PerceptualSource/index.vue
View File

@ -197,6 +197,11 @@ const addEdit = (type, row) => {
detailDiloag.value.init(type, row);
};
const historyDialog = ref();
const showTrack = (row) => {
historyDialog.value.open(row);
};
const searchBox = ref(null);
// 表格高度计算
const tabHeightFn = () => {

56
src/views/backOfficeSystem/peopleManag/TrackPerson/components/HistoryTrackDialog.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<el-dialog v-model="visible" title="历史轨迹" width="80%" :close-on-click-modal="false" :destroy-on-close="true">
<div style="width:100%; height:60vh; position:relative;">
<GdMap :isShow="true" :isShowZoom="true" />
</div>
<template #footer>
<span>{{ personLabel }}</span>
<el-button @click="visible=false">关闭</el-button>
</template>
</el-dialog>
</template>
<script setup>
import { ref, nextTick } from 'vue'
import GdMap from '@/components/GdMap/index.vue'
import emitter from '@/utils/eventBus.js'
import { RyGjTrajectory } from '@/api/mosty-jcz.js'
import { ElMessage } from 'element-plus'
const visible = ref(false)
const sfzh = ref('')
const personLabel = ref('')
const open = async (row) => {
sfzh.value = row.sfzh
personLabel.value = `${row.xm || ''}（近30天）`
visible.value = true
await nextTick()
emitter.emit('map-resize')
const res = await RyGjTrajectory({ sfzh: sfzh.value, days: 30 })
const list = Array.isArray(res) ? res : (res?.data?.data || [])
if (!list || list.length === 0) {
ElMessage({ message: '近30天无轨迹数据', type: 'info' })
emitter.emit('removeElement', 'rygj')
return
}
const coords = list.map(it => [Number(it.jd), Number(it.wd)])
const start = coords[0]
console.log('coords', coords)
emitter.emit('setMapCenter', { location: start, zoomLevel: 12 })
if (coords.length > 1) {
emitter.emit('drawLineAnimation', { coords, isClear: true, flag: 'rygj' })
}
// 撒点显示历史轨迹
const pointObjs = list.map(it => ({ jd: Number(it.jd), wd: Number(it.wd) }))
emitter.emit('addPointArea', { coords: pointObjs, icon: require('@/assets/images/bi/gzy.png'), flag: 'rygj_points' })
}
defineExpose({ open })
</script>
<style scoped>
</style>

168
src/views/backOfficeSystem/peopleManag/TrackPerson/components/editAddForm.vue Normal file
View File

@ -0,0 +1,168 @@
<template>
<div class="dialog" v-if="dialogForm">
<div class="head_box">
<span class="title">{{ pageInfo[pageType].title }}</span>
<div>
<el-button size="small" type="primary" v-if="['add', 'edit'].includes(pageType)" @click="_onSave">保存</el-button>
<el-button size="small" @click="close">关闭</el-button>
</div>
</div>
<div class="cntinfo">
<el-form ref="formRef" :model="form" :rules="rules" :inline="true" label-position="top">
<el-form-item style="width: 40%" prop="sfzh" label="身份证号">
<el-input v-model="form.sfzh" placeholder="请输入身份证号" clearable />
</el-form-item>
<el-form-item style="width: 40%" prop="xm" label="姓名">
<el-input v-model="form.xm" placeholder="请输入姓名" clearable />
</el-form-item>
<el-form-item style="width: 40%" prop="rylx" label="人员类型">
<el-select v-model="form.rylx" placeholder="请选择" style="width: 100%">
<el-option label="流动人口" value="01" />
<el-option label="常驻人口" value="02" />
<el-option label="重点人" value="03" />
</el-select>
</el-form-item>
<el-form-item style="width: 40%" prop="pcsj" label="采集时间">
<el-date-picker v-model="form.pcsj" type="datetime" placeholder="请选择" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
</el-form-item>
<el-form-item style="width: 40%" prop="ssbmdm" label="所属部门">
<MOSTY.Department width="100%" clearable v-model="form.ssbmdm" :placeholder="form.ssbm ? form.ssbm : '请选择所属部门'" />
</el-form-item>
<!-- 联系方式与地址在前 -->
<el-form-item style="width: 40%" prop="lxdh" label="联系电话">
<el-input v-model="form.lxdh" placeholder="请输入联系电话" clearable />
</el-form-item>
<el-form-item style="width: 40%" prop="xjzdz" label="居住地址">
<el-input v-model="form.xjzdz" placeholder="请输入居住地址" clearable />
</el-form-item>
<!-- 经纬度选择放到最后，参考感知源实现 -->
<el-form-item style="width: 85%" prop="jd" label="坐标位置">
<div class="latlng">
<el-input :disabled="true" v-model="form.jd" clearable placeholder="请选择坐标" style="width: 42%" />
<el-input :disabled="true" v-model="form.wd" clearable placeholder="请选择坐标" style="width: 42%; margin-left: 1%" />
<el-button @click="selectLocation" size="small" type="primary">选择定位</el-button>
</div>
</el-form-item>
<el-form-item style="width: 100%">
<div class="mapbox"><GdMap /></div>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { RyGjInsertEntity, RyGjEditEntity } from '@/api/mosty-jcz.js'
import * as MOSTY from '@/components/MyComponents/index'
import GdMap from '@/components/GdMap/index.vue'
import emitter from '@/utils/eventBus.js'
const formRef = ref(null)
const dialogForm = ref(false)
const form = ref({})
const pageType = ref('add')
const emit = defineEmits(['refresh'])
const pageInfo = { add: { title: '新增', url: '' }, edit: { title: '编辑', url: '' }, detail: { title: '详情' } }
const rules = {
sfzh: [{ required: true, message: '请输入身份证号' }],
rylx: [{ required: true, message: '请选择人员类型' }],
pcsj: [{ required: true, message: '请选择采集时间', trigger: 'change' }],
jd: [{ required: true, message: '请输入经度' }],
wd: [{ required: true, message: '请输入纬度' }]
}
const init = (type, row) => {
pageType.value = type
dialogForm.value = true
if (type === 'detail') {
form.value = { ...row }
centerMap()
} else if (type === 'edit') {
form.value = { ...row }
} else {
form.value = {}
}
}
const _onSave = () => {
if (!formRef.value) return
formRef.value.validate((valid) => {
if (!valid) return
enrichFromSfzh()
if (pageType.value === 'add') {
RyGjInsertEntity(form.value).then(() => { ElMessage({ message: '新增成功', type: 'success' }); emit('refresh'); close(); })
} else {
RyGjEditEntity(form.value).then(() => { ElMessage({ message: '修改成功', type: 'success' }); emit('refresh'); close(); })
}
})
}
const close = () => { dialogForm.value = false; form.value = {} }
defineExpose({ init })
const enrichFromSfzh = () => {
const val = form.value.sfzh || ''
if (val && val.length >= 18) {
const y = val.substring(6, 10)
const m = val.substring(10, 12)
const d = val.substring(12, 14)
form.value.csrq = `${y}-${m}-${d}`
const genderCode = parseInt(val.substring(16, 17))
form.value.xbdm = (genderCode % 2 === 1) ? '1' : '2' // 1-男 2-女
}
}
const selectLocation = () => {
emitter.emit('drawShape', { flag: 'select_point', type: 'point', isclear: true })
}
const coordHandler = (res) => {
if (res?.type === 'point') {
form.value.jd = res.coord[0]
form.value.wd = res.coord[1]
chackLat()
}
}
const centerMap = () => {
if (form.value.jd && form.value.wd) {
emitter.emit('setMapCenter', { location: [Number(form.value.jd), Number(form.value.wd)], zoomLevel: 12 })
chackLat()
}
}
const chackLat = () => {
const { jd, wd } = form.value
emitter.emit('deletePointArea', 'jczMap_Gzy')
if (jd && wd) {
emitter.emit('addPointArea', {
coords: [{ jd: Number(jd), wd: Number(wd) }],
icon: require('@/assets/images/bi/gzy.png'),
flag: 'jczMap_Gzy'
})
}
}
onMounted(() => { emitter.on('coordString', coordHandler) })
onUnmounted(() => { emitter.off('coordString') })
</script>
<style scoped>
.dialog { padding: 20px; }
.head_box { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cntinfo { height: calc(100% - 70px); overflow: auto; }
.mapbox {
width: 1000px;
padding: 0 10px;
height: 400px;
box-sizing: border-box;
background: #000;
}
.latlng { display: flex; align-items: center; gap: 8px; }
</style>

126
src/views/backOfficeSystem/peopleManag/TrackPerson/index.vue Normal file
View File

@ -0,0 +1,126 @@
<template>
<div>
<div class="titleBox">
<PageTitle title="人员轨迹">
<el-button type="primary" @click="addEdit('add', '')" v-if="Auth">新增</el-button>
</PageTitle>
</div>
<div ref="searchBox">
<Search :searchArr="searchConfiger" @submit="onSearch" />
</div>
<div class="tabBox">
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
<template #rylx="{ row }">
{{ rylxMap[row.rylx] || row.rylx || '-' }}
</template>
<template #controls="{ row }">
<template v-if="Auth">
<el-link type="primary" @click="addEdit('edit', row)">编辑</el-link>
<el-link type="primary" @click="delItem(row.id)">删除</el-link>
</template>
<el-link type="primary" @click="showTrack(row)">历史轨迹</el-link>
</template>
</MyTable>
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
...pageData.pageConfiger,
total: pageData.total
}"></Pages>
</div>
<EditAddForm ref="detailDiloag" @refresh="getList" />
<HistoryTrackDialog ref="historyDialog" />
</div>
</template>
<script setup>
import { ElMessage } from "element-plus";
import PageTitle from "@/components/aboutTable/PageTitle.vue";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import EditAddForm from "./components/editAddForm.vue";
import HistoryTrackDialog from "./components/HistoryTrackDialog.vue";
import { RyGjSelectPage, RyGjDeleteById } from "@/api/mosty-jcz.js";
import { isAuth } from '@/utils/tools.js'
import { reactive, ref, onMounted, nextTick } from "vue";
const Auth = ref(true)
onMounted(() => {
Auth.value = isAuth()
nextTick(() => { tabHeightFn(); });
});
const rylxMap = {
'01': '流动人口',
'02': '常驻人口',
'03': '重点人'
}
const searchConfiger = ref([
{ label: "身份证号", prop: "sfzh", placeholder: "请输入身份证号", showType: "input" },
{ label: "姓名", prop: "xm", placeholder: "请输入姓名", showType: "input" },
{ label: "人员类型", prop: "rylx", placeholder: "请选择", showType: "select", options: [
{ label: '流动人口', value: '01' },
{ label: '常驻人口', value: '02' },
{ label: '重点人', value: '03' }
] },
{ label: "开始时间", prop: "startTime", placeholder: "请选择开始时间", showType: "dateTime" },
{ label: "结束时间", prop: "endTime", placeholder: "请选择结束时间", showType: "dateTime" }
]);
const pageData = reactive({
tableData: [],
keyCount: 0,
tableConfiger: { rowHieght: 61, showSelectType: "null", loading: false },
total: 0,
pageConfiger: { pageSize: 20, pageCurrent: 1 },
controlsWidth: 250,
tableHeight: 0,
tableColumn: [
{ label: "身份证号", prop: "sfzh", showOverflowTooltip: true },
{ label: "姓名", prop: "xm", showOverflowTooltip: true },
{ label: "人员类型", prop: "rylx", showOverflowTooltip: true, showSolt: true },
{ label: "采集时间", prop: "pcsj", showOverflowTooltip: true },
{ label: "经度", prop: "jd", showOverflowTooltip: true },
{ label: "纬度", prop: "wd", showOverflowTooltip: true },
{ label: "所属部门", prop: "ssbm", showOverflowTooltip: true },
]
});
const queryCondition = ref({});
const getList = () => {
pageData.tableConfiger.loading = true;
const params = { ...queryCondition.value, ...pageData.pageConfiger };
RyGjSelectPage(params)
.then((res) => {
const r = res?.data?.data || res;
pageData.tableData = r.records || [];
pageData.total = r.total || 0;
})
.finally(() => { pageData.tableConfiger.loading = false; });
};
getList();
const onSearch = (val) => { queryCondition.value = { ...queryCondition.value, ...val }; getList(); };
const changeNo = (val) => { pageData.pageConfiger.pageCurrent = val; getList(); };
const changeSize = (val) => { pageData.pageConfiger.pageSize = val; getList(); };
const delItem = (id) => {
RyGjDeleteById(id).then(() => { ElMessage({ message: "删除成功", type: "success" }); getList(); });
};
const detailDiloag = ref();
const addEdit = (type, row) => { detailDiloag.value.init(type, row); };
const historyDialog = ref();
const showTrack = (row) => { historyDialog.value.open(row); };
const searchBox = ref(null);
const tabHeightFn = () => {
pageData.tableHeight = window.innerHeight - (searchBox.value?.offsetHeight || 0) - 280;
window.onresize = function () { tabHeightFn(); };
};
</script>
<style>
.el-loading-mask { background: rgba(0, 0, 0, 0.5) !important; }
</style>