update
This commit is contained in:
zk
@@ -6,7 +6,8 @@
|
||||
</template>
|
||||
</public-title>
|
||||
<div class="inner">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
|
||||
<vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4"
|
||||
v-bind="classOption">
|
||||
<div class="item" v-for="(item, i) in scrollList" :key="i">
|
||||
<span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
|
||||
<span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
|
||||
@@ -58,221 +59,225 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import $bus from '/@/utils/bus.ts';
|
||||
import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
|
||||
import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
|
||||
import { Map } from '/@/assets/mapUtils/map.ts';
|
||||
import {onMounted, ref} from 'vue';
|
||||
import {useRouter} from 'vue-router';
|
||||
import $bus from '/@/utils/bus.ts';
|
||||
import {columns} from '/@/components/body-d-right/bodyRightHooks.ts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import Dialog from '/@/components/dialog/Dialog.vue';
|
||||
import {Vue3SeamlessScroll} from 'vue3-seamless-scroll';
|
||||
import {getMonitorList} from '/@/components/body-d-right/right.api.ts';
|
||||
import {Map} from '/@/assets/mapUtils/map.ts';
|
||||
|
||||
const router = useRouter();
|
||||
const classOption = ref({
|
||||
step: 0.3, // 速度
|
||||
});
|
||||
const open = ref<boolean>(false);
|
||||
const openInfor = ref<boolean>(false);
|
||||
const userInfo = ref({
|
||||
realName: '',
|
||||
orgName1: '',
|
||||
phone: '',
|
||||
eventType_dictText: '',
|
||||
warnTime: '',
|
||||
address: '',
|
||||
});
|
||||
const router = useRouter();
|
||||
const classOption = ref({
|
||||
step: 0.3, // 速度
|
||||
});
|
||||
const open = ref<boolean>(false);
|
||||
const openInfor = ref<boolean>(false);
|
||||
const userInfo = ref({
|
||||
realName: '',
|
||||
orgName1: '',
|
||||
phone: '',
|
||||
eventType_dictText: '',
|
||||
warnTime: '',
|
||||
address: '',
|
||||
});
|
||||
|
||||
const dataSource = ref([
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
]);
|
||||
const dataSource = ref([
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
]);
|
||||
|
||||
/**
|
||||
* @desc open员工信息
|
||||
*/
|
||||
function handlePolice(item) {
|
||||
userInfo.value = item;
|
||||
openInfor.value = true;
|
||||
classOption.value.step = 0;
|
||||
/**
|
||||
* @desc open员工信息
|
||||
*/
|
||||
function handlePolice(item) {
|
||||
userInfo.value = item;
|
||||
openInfor.value = true;
|
||||
classOption.value.step = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc close员工信息
|
||||
*/
|
||||
function handlePoliceClose() {
|
||||
openInfor.value = false;
|
||||
classOption.value.step = 0.3;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getScrollList();
|
||||
});
|
||||
|
||||
/**
|
||||
* @desc 终端报警
|
||||
* */
|
||||
const scrollList = ref([]);
|
||||
|
||||
async function getScrollList() {
|
||||
const {code, result} = await getMonitorList({pageSize: 10, pageNo: 1});
|
||||
if (code == 200) {
|
||||
scrollList.value = result.records;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @desc close员工信息
|
||||
*/
|
||||
function handlePoliceClose() {
|
||||
openInfor.value = false;
|
||||
classOption.value.step = 0.3;
|
||||
function sendPosition(item) {
|
||||
let {lon, lat} = item;
|
||||
if (lon && lat) {
|
||||
Map.createMarker(item, () => {
|
||||
handlePolice(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getScrollList();
|
||||
});
|
||||
|
||||
/**
|
||||
* @desc 终端报警
|
||||
* */
|
||||
const scrollList = ref([]);
|
||||
|
||||
async function getScrollList() {
|
||||
const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
|
||||
if (code == 200) {
|
||||
scrollList.value = result.records;
|
||||
}
|
||||
}
|
||||
|
||||
function sendPosition(item) {
|
||||
let { lon, lat } = item;
|
||||
if (lon && lat) {
|
||||
Map.createMarker(item, () => {
|
||||
handlePolice(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function viewDetail() {
|
||||
router.push({ path: '/secondScreen' });
|
||||
}
|
||||
function viewDetail() {
|
||||
router.push({path: '/secondScreen'});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.right-text {
|
||||
font-size: 14px;
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.right-text {
|
||||
font-size: 14px;
|
||||
font-weight: 100;
|
||||
cursor: pointer;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.right-text:hover {
|
||||
color: #129bff;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
width: 98%;
|
||||
height: 88%;
|
||||
overflow: hidden;
|
||||
.inner {
|
||||
height: calc(100% - 40px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.item {
|
||||
.scroll {
|
||||
width: 98%;
|
||||
height: 88%;
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3% 0;
|
||||
|
||||
.fixed-width {
|
||||
display: inline-flex;
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.time-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 3% 0;
|
||||
|
||||
.fixed-width {
|
||||
display: inline-flex;
|
||||
width: 100px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.time-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.terminal-icon {
|
||||
margin-left: 15px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/@/assets/images/terminal.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.position {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url('/@/assets/img/position.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.police-con {
|
||||
color: #ffffff;
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
padding: 2% 0 2% 5%;
|
||||
|
||||
.con-item {
|
||||
padding: 1.3% 0;
|
||||
|
||||
span:nth-child(1) {
|
||||
font-weight: bold;
|
||||
.terminal-icon {
|
||||
margin-left: 15px;
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/@/assets/images/terminal.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
padding-left: 2%;
|
||||
.position {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url('/@/assets/img/position.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.police-con {
|
||||
color: #ffffff;
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
padding: 2% 0 2% 5%;
|
||||
|
||||
.con-item {
|
||||
padding: 1.3% 0;
|
||||
|
||||
span:nth-child(1) {
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
padding-left: 2%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less">
|
||||
.dialog-con {
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
/*
|
||||
.dialog-con {
|
||||
background-color: #00152b;
|
||||
border: 1px solid #129bff;
|
||||
/*
|
||||
antd表格样式
|
||||
*/
|
||||
|
||||
.ant-table-thead > tr > th {
|
||||
border-bottom: 1px solid #1e73c2 !important;
|
||||
}
|
||||
.ant-table-thead > tr > th {
|
||||
border-bottom: 1px solid #1e73c2 !important;
|
||||
}
|
||||
|
||||
.ant-table-body {
|
||||
background-color: #00152b !important;
|
||||
}
|
||||
.ant-table-body {
|
||||
background-color: #00152b !important;
|
||||
}
|
||||
|
||||
.ant-modal-header {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.ant-modal-header {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid #1e73c2 !important;
|
||||
background-color: #00152b !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid #1e73c2 !important;
|
||||
background-color: #00152b !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr.ant-table-row:hover > td,
|
||||
.ant-table-tbody > tr > td.ant-table-cell-row-hover,
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #00152b !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.ant-table-tbody > tr.ant-table-row:hover > td,
|
||||
.ant-table-tbody > tr > td.ant-table-cell-row-hover,
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #00152b !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.ant-table-cell-scrollbar {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.ant-table-cell-scrollbar {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
/*
|
||||
表格滚动条
|
||||
*/
|
||||
|
||||
.ant-table-body::-webkit-scrollbar-thumb {
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
height: 6px;
|
||||
border-radius: 25px;
|
||||
background-clip: padding-box;
|
||||
background-color: rgba(30, 115, 194, 0.3);
|
||||
}
|
||||
.ant-table-body::-webkit-scrollbar-thumb {
|
||||
border: 4px solid rgba(0, 0, 0, 0);
|
||||
height: 6px;
|
||||
border-radius: 25px;
|
||||
background-clip: padding-box;
|
||||
background-color: rgba(30, 115, 194, 0.3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user