2025年04月02日18:40:16
This commit is contained in:
parent
e46ea4b376
commit
7f6112b211
5
components.d.ts
vendored
5
components.d.ts
vendored
@ -7,8 +7,12 @@ export {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
2: typeof import('./src/components/alarm copy 2.vue')['default']
|
||||
Alarm: typeof import('./src/components/alarm.vue')['default']
|
||||
BatchImp: typeof import('./src/components/batch-imp.vue')['default']
|
||||
copy: typeof import('./src/components/alarm copy.vue')['default']
|
||||
Countup: typeof import('./src/components/countup.vue')['default']
|
||||
DeviceInfo: typeof import('./src/components/deviceInfo.vue')['default']
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
|
||||
@ -46,6 +50,7 @@ declare module '@vue/runtime-core' {
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Sidebar: typeof import('./src/components/sidebar.vue')['default']
|
||||
StudentInfo: typeof import('./src/components/studentInfo.vue')['default']
|
||||
TableCustom: typeof import('./src/components/table-custom.vue')['default']
|
||||
TableDetail: typeof import('./src/components/table-detail.vue')['default']
|
||||
TableEdit: typeof import('./src/components/table-edit.vue')['default']
|
||||
|
||||
BIN
src/assets/audio/alarm.mp3
Normal file
BIN
src/assets/audio/alarm.mp3
Normal file
Binary file not shown.
@ -80,6 +80,18 @@ i {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.el-dialog__body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.el-dialog__body img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.el-icon--close-tip {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
246
src/components/alarm.vue
Normal file
246
src/components/alarm.vue
Normal file
@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<transition name="emergency-modal">
|
||||
<div class="modal-mask" @click.self="$emit('close')">
|
||||
<div class="emergency-modal" :class="{ 'emergency-pulse': show }">
|
||||
<div class="glow"></div>
|
||||
<div class="modal-header">
|
||||
<div class="warning-icon">⚠️</div>
|
||||
<h2>{{ title }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
<p>{{ content }}</p>
|
||||
</div>
|
||||
|
||||
<button class="emergency-button" @click="handleAudioEnd">
|
||||
<span class="button-text">立即处理</span>
|
||||
<div class="button-glow"></div>
|
||||
</button>
|
||||
|
||||
<!-- <audio ref="audioPlayer" autoplay loop>
|
||||
<source src="../assets/audio/alarm.mp3" type="video/mp3" />
|
||||
</audio> -->
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
const audioPlayer = ref(null);
|
||||
|
||||
defineProps({
|
||||
show: Boolean,
|
||||
title: {
|
||||
type: String,
|
||||
default: "紧急警报！",
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: "检测到危险操作，请立即处理！",
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(["close", "confirm"]);
|
||||
|
||||
const handleAudioEnd = () => {
|
||||
if (audioPlayer.value) {
|
||||
audioPlayer.value.play().catch((error) => {
|
||||
console.error("自动播放被阻止:", error);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 确保在DOM完全加载后播放音频
|
||||
// if (audioPlayer.value) {
|
||||
// setTimeout(() => {
|
||||
// audioPlayer.value.play();
|
||||
// });
|
||||
// audioPlayer.value.play();
|
||||
// // 设置音频静音，浏览器允许自动播放
|
||||
// audioPlayer.value
|
||||
// .play()
|
||||
// .then(() => {
|
||||
// // 自动播放成功后取消静音
|
||||
// audioPlayer.value.muted = false;
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log("自动播放失败", error);
|
||||
// });
|
||||
// }
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
z-index: 9998;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.emergency-modal {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
padding: 2rem;
|
||||
background: #2a0a0a;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #ff4444;
|
||||
box-shadow: 0 0 40px rgba(255, 68, 68, 0.3);
|
||||
transform-origin: center;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.glow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at 50% 50%, rgba(255, 68, 68, 0.3) 0%, rgba(255, 68, 68, 0) 70%);
|
||||
animation: glow-pulse 2s infinite;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.warning-icon {
|
||||
font-size: 3rem;
|
||||
margin-right: 1rem;
|
||||
animation: shake 0.8s ease infinite;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ff4444;
|
||||
font-size: 1.8rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
color: #ffaaaa;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.emergency-button {
|
||||
position: relative;
|
||||
padding: 1rem 2rem;
|
||||
background: linear-gradient(45deg, #ff4444, #ff0000);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.button-glow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, transparent 25%, rgba(255, 255, 255, 0.2) 50%, transparent 75%);
|
||||
animation: slide 1.5s infinite;
|
||||
}
|
||||
|
||||
.emergency-button:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.emergency-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes emergency-pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(-3px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow-pulse {
|
||||
0% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
to {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.emergency-modal-enter-active {
|
||||
animation: emergency-modal-in 0.3s;
|
||||
}
|
||||
|
||||
.emergency-modal-leave-active {
|
||||
animation: emergency-modal-in 0.3s reverse;
|
||||
}
|
||||
|
||||
@keyframes emergency-modal-in {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.emergency-pulse {
|
||||
animation: emergency-pulse 1.5s infinite;
|
||||
}
|
||||
</style>
|
||||
165
src/components/deviceInfo.vue
Normal file
165
src/components/deviceInfo.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div class="infoBox">
|
||||
<div class="infoBox-head">
|
||||
<div class="item">
|
||||
<div class="span">姓名：</div>
|
||||
<div class="span">{{ value.username }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<i class="el-icon-close" style="font-size: 24px; cursor: pointer" @click="$emit('close')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoBox-content">
|
||||
2
|
||||
<div class="item">
|
||||
<div class="item-left">IMEI号</div>
|
||||
<div class="item-right">{{ value.deviceId }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-left">定位方式</div>
|
||||
<div class="item-right">{{ locateEnum[value.locateType == -1 ? 3 : value.locateType] }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-left">定位时间</div>
|
||||
<div class="item-right">{{ value.locateTime }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-left">位置</div>
|
||||
<div class="item-right">{{ value.address }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
enum locateEnum {
|
||||
"WIFI" = 0,
|
||||
"LBS",
|
||||
"GPS",
|
||||
"未知",
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.infoBox {
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
|
||||
.triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 20px solid #fff;
|
||||
border-left: 15px solid transparent;
|
||||
border-right: 15px solid transparent;
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.infoBox-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #eef1f3;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
|
||||
.span {
|
||||
flex-shrink: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.battery {
|
||||
width: 34px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
|
||||
.battery-left {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
border-radius: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1px;
|
||||
font-size: 10px;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.battery-right {
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
height: 50%;
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infoBox-content {
|
||||
border-bottom: 1px solid #eef1f3;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
|
||||
.item-left {
|
||||
flex-shrink: 0;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.infoBox-foot {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: #0091ff;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -46,11 +46,10 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item>
|
||||
<!-- <el-button @click="emit('cancel')">取 消</el-button> -->
|
||||
<div class="btns">
|
||||
<el-button @click="emit('close')">取 消</el-button>
|
||||
<el-button type="primary" @click="saveEdit(formRef)">保 存</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
@ -78,7 +77,7 @@ const { options, formData, edit, update } = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["cancel"]);
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
const form = ref({ ...(edit ? formData : {}) });
|
||||
|
||||
@ -126,4 +125,8 @@ const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) =>
|
||||
height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -32,6 +32,47 @@ export class MapCustom {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
track(list) {
|
||||
let markerList = []
|
||||
let lineArr = list.map((item) => [item.lng, item.lat])
|
||||
|
||||
const newIcon = this.map.icon({
|
||||
size: new AMap.Size(50, 50),
|
||||
image: require('../../../assets/location.png'), // Icon的图像
|
||||
imageSize: new AMap.Size(50, 50)
|
||||
})
|
||||
|
||||
list.forEach((item, index) => {
|
||||
let marker = this.map.marker({
|
||||
position: this.map.lngLat(item.lng, item.lat),
|
||||
icon: newIcon, // 添加 Icon 图标 URL
|
||||
offset: new AMap.Pixel(-25, -50)
|
||||
})
|
||||
|
||||
marker.setMap(this.map)
|
||||
markerList.push(marker)
|
||||
marker.on('click', () => {
|
||||
this.studentInfo = item
|
||||
this.InfoWindow = this.map.infoWindow({
|
||||
anchor: 'bottom-center',
|
||||
isCustom: true, //使用自定义窗体
|
||||
content: document.querySelector('.infoBox'),
|
||||
offset: new AMap.Pixel(0, -90)
|
||||
})
|
||||
this.InfoWindow.open(this.map, marker.getPosition())
|
||||
})
|
||||
})
|
||||
this.map.polyline({
|
||||
map: this.map,
|
||||
path: lineArr,
|
||||
showDir: true,
|
||||
strokeColor: '#28F', //线颜色
|
||||
strokeWeight: 6 //线宽
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
clearMap() {
|
||||
this.map.clearMap();
|
||||
}
|
||||
|
||||
@ -31,11 +31,11 @@
|
||||
<el-col :span="7">
|
||||
<div class="info scrollbar">
|
||||
<div class="info-text">设备序号：05</div>
|
||||
<div class="info-text">设备SN号：860116079430636</div>
|
||||
<div class="info-text">IMEI号：860116079430636</div>
|
||||
<div class="info-text">告警时间：2025/03/26 18:33:32</div>
|
||||
<div class="info-text">告警类型：体表温度过低</div>
|
||||
<div class="info-text">绑定关联人名称：管理员</div>
|
||||
<div class="info-text">绑定关联人警号：欧尼蒋</div>
|
||||
<div class="info-text">告警类型：<span style="color: red">体表温度过低</span></div>
|
||||
<div class="info-text">绑定关联人名称：张三</div>
|
||||
<div class="info-text">绑定关联人警号：123456</div>
|
||||
<div class="info-text">现在状态：禁用</div>
|
||||
<div class="info-text">紧急电话：10000000000</div>
|
||||
<div class="info-text">隶属辖区：87</div>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="device-list noScrollbar">
|
||||
<el-popover class="box-item" title="Title" content="Top Left prompts info" placement="bottom" v-for="item in 4" :key="item">
|
||||
<el-popover :width="400" class="box-item" placement="bottom" v-for="item in 4" :key="item">
|
||||
<template #reference>
|
||||
<div class="item">
|
||||
<div class="item-img">
|
||||
@ -31,6 +31,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="demo-rich-conent">
|
||||
<div>
|
||||
<span class="lable">手铐关联人：</span>
|
||||
张三
|
||||
</div>
|
||||
<div>
|
||||
<span class="lable">类型：</span>
|
||||
警察
|
||||
</div>
|
||||
<div>
|
||||
<span class="lable">警号：</span>
|
||||
123456
|
||||
</div>
|
||||
<div>
|
||||
<span class="lable">联系电话：</span>
|
||||
13007777555
|
||||
</div>
|
||||
<div>
|
||||
<span class="lable">佩戴者编号：</span>
|
||||
BJ-0112
|
||||
</div>
|
||||
<div>
|
||||
<span class="lable">阈值：</span>
|
||||
12
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
@ -131,4 +159,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo-rich-conent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.lable {
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="card-head">
|
||||
<div class="title">内容数据</div>
|
||||
<div class="condition">
|
||||
<el-input style="width: 240px" placeholder="搜索设备SN号" :suffix-icon="Search" />
|
||||
<el-input style="width: 240px" placeholder="搜索设备IMEI号" :suffix-icon="Search" />
|
||||
</div>
|
||||
</div>
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">
|
||||
|
||||
@ -37,6 +37,7 @@ import TableSearch from "@/components/table-search.vue";
|
||||
import AddFence from "./addFence.vue";
|
||||
import { TableItem } from "@/types/table";
|
||||
import { FormOptionList } from "@/types/form-option";
|
||||
import Alarm from "@/components/alarm.vue";
|
||||
|
||||
// 查询相关
|
||||
const query = reactive({
|
||||
|
||||
@ -4,32 +4,79 @@
|
||||
<div class="table-container">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">
|
||||
<template #toolbarBtn>
|
||||
<el-button type="primary" @click="handleAdd">新增</el-button>
|
||||
<el-button @click="visible = true">手铐关联</el-button>
|
||||
<el-button>地图位置</el-button>
|
||||
<el-button>导出</el-button>
|
||||
<el-button type="danger">删除</el-button>
|
||||
<!-- <el-button type="primary" @click="handleAdd">新增</el-button> -->
|
||||
<el-button @click="handleEdit">手铐关联</el-button>
|
||||
<!-- <el-button>地图位置</el-button> -->
|
||||
<!-- <el-button>导出</el-button> -->
|
||||
</template>
|
||||
<template #money="{ rows }"> ￥{{ rows.money }} </template>
|
||||
<template #thumb="{ rows }">
|
||||
<el-image class="table-td-thumb" :src="rows.thumb" :z-index="10" :preview-src-list="[rows.thumb]" preview-teleported> </el-image>
|
||||
</template>
|
||||
<template #state="{ rows }">
|
||||
<el-tag :type="rows.state ? 'success' : 'danger'">
|
||||
{{ rows.state ? "正常" : "异常" }}
|
||||
</el-tag>
|
||||
<el-switch />
|
||||
</template>
|
||||
<template #operator="{ rows }">
|
||||
<el-button link type="primary" size="small" @click="router.push('deviceInfo')"> 详细信息 </el-button>
|
||||
<el-button link type="primary" size="small" @click="router.push('mapLocation')"> 地图位置 </el-button>
|
||||
<el-button link type="primary" size="small" @click="router.push('setting')"> 专项配置 </el-button>
|
||||
<el-button link type="primary" size="small" @click="visible1 = true"> 设备控制 </el-button>
|
||||
<el-button link type="primary" size="small" @click="handleEdit(rows)"> 修改 </el-button>
|
||||
<el-button link type="danger" size="small" @click="handelDel(rows)"> 删除 </el-button>
|
||||
<!-- <el-button link type="danger" size="small" @click="handelDel(rows)"> 删除 </el-button> -->
|
||||
</template>
|
||||
</TableCustom>
|
||||
</div>
|
||||
<el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
|
||||
<TableEdit :form-data="rowData" :options="TableEditOptions" :edit="isEdit" :update="updateData" />
|
||||
<TableEdit :form-data="rowData" :options="TableEditOptions" :edit="isEdit" :update="updateData" @close="closeDialog" />
|
||||
</el-dialog>
|
||||
<el-dialog title="设备控制" v-model="visible1" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
|
||||
<!-- <TableEdit :form-data="rowData" :options="controlOptions" :update="updateData" /> -->
|
||||
<el-form label-width="auto">
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="关机：">
|
||||
<el-button type="primary" @click="handelControl(1)">关机</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="重启：">
|
||||
<el-button type="primary" @click="handelControl(2)">重启</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="获取实时定位：">
|
||||
<el-button type="primary" @click="handelControl(2)">获取实时定位</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="恢复出厂：">
|
||||
<el-button type="primary" @click="handelControl(3)">恢复出厂</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="模式选择：">
|
||||
<el-select placeholder="请选择模式" v-model="controlForm.pattern" style="width: 240px" @change="handelControl(4)">
|
||||
<el-option label="审讯模式" :value="1" />
|
||||
<el-option label="户外押送" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="定位模式：">
|
||||
<el-select placeholder="请选择定位模式" v-model="controlForm.location" style="width: 240px" @change="handelControl(5)">
|
||||
<el-option label="室内" :value="1" />
|
||||
<el-option label="室外" :value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -79,6 +126,9 @@ let columns = ref([
|
||||
{ prop: "money", label: "绑定警察名称" },
|
||||
{ prop: "thumb", label: "绑定警察账户" },
|
||||
{ prop: "state", label: "当前状态" },
|
||||
{ prop: "state", label: "当前模式" },
|
||||
{ prop: "state", label: "电量" },
|
||||
{ prop: "state", label: "版本号" },
|
||||
{ prop: "state", label: "登录时间" },
|
||||
{ prop: "state", label: "最近使用时间" },
|
||||
{ prop: "state", label: "关联辖区编号" },
|
||||
@ -89,6 +139,11 @@ const page = reactive({
|
||||
size: 10,
|
||||
total: 200,
|
||||
});
|
||||
const controlForm = reactive({
|
||||
pattern: "",
|
||||
location: "",
|
||||
});
|
||||
|
||||
const tableData = ref<TableItem[]>([]);
|
||||
const getData = async () => {
|
||||
const res = await fetchData();
|
||||
@ -101,6 +156,7 @@ const changePage = (val: number) => {
|
||||
getData();
|
||||
};
|
||||
|
||||
const visible1 = ref(false);
|
||||
const visible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const rowData = ref({});
|
||||
@ -111,13 +167,24 @@ const handleAdd = () => {
|
||||
};
|
||||
|
||||
// 编辑
|
||||
const handleEdit = (row: TableItem) => {
|
||||
const handleEdit = (row?: TableItem) => {
|
||||
// rowData.value = { ...row };
|
||||
TableEditOptions.value.list = editOp;
|
||||
isEdit.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const handelControl = (type: number) => {
|
||||
if (type < 4) {
|
||||
ElMessageBox.confirm("确定要关机吗？", "提示", {
|
||||
type: "warning",
|
||||
})
|
||||
.then(async () => {
|
||||
// ElMessage.success("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
visible1.value = false;
|
||||
};
|
||||
// 删除
|
||||
const handelDel = (row: TableItem) => {
|
||||
ElMessageBox.confirm("确定要删除吗？", "提示", {
|
||||
|
||||
@ -1,6 +1,48 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-row :gutter="20">
|
||||
<div class="box">
|
||||
<div class="editTool">
|
||||
<span>时间区间：</span>
|
||||
<el-radio-group v-model="sectionType">
|
||||
<el-radio-button :value="1">小时</el-radio-button>
|
||||
<el-radio-button :value="2">天</el-radio-button>
|
||||
<el-radio-button :value="3">周</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<div class="editTool-time">
|
||||
<el-date-picker
|
||||
v-if="sectionType != 3"
|
||||
style="width: 300px"
|
||||
type="datetimerange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
/>
|
||||
<el-date-picker v-else type="week" value-format="YYYY-MM-DD/ww" placeholder="请选择周" @change="weekChange" />
|
||||
</div>
|
||||
<el-select
|
||||
v-model="value"
|
||||
multiple
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
placeholder="请输入设备IMEI"
|
||||
:remote-method="remoteMethod"
|
||||
:loading="loading"
|
||||
style="width: 240px"
|
||||
>
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<!-- <span>位置样式：</span>
|
||||
<el-radio-group v-model="styleType">
|
||||
<el-radio-button :value="1">点</el-radio-button>
|
||||
<el-radio-button :value="2">线</el-radio-button>
|
||||
</el-radio-group> -->
|
||||
</div>
|
||||
<div id="mapcontainer" style="flex: 1"></div>
|
||||
</div>
|
||||
<!-- <el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="incidentList">
|
||||
<div class="head">
|
||||
@ -21,35 +63,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18" class="container-right">
|
||||
<div class="editTool">
|
||||
<span>时间区间：</span>
|
||||
<el-radio-group v-model="sectionType">
|
||||
<el-radio-button :value="1">小时</el-radio-button>
|
||||
<el-radio-button :value="2">天</el-radio-button>
|
||||
<el-radio-button :value="3">周</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<div class="editTool-time">
|
||||
<el-date-picker
|
||||
v-if="sectionType != 3"
|
||||
style="width: 300px"
|
||||
type="datetimerange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
/>
|
||||
<el-date-picker v-else type="week" value-format="YYYY-MM-DD/ww" placeholder="请选择周" @change="weekChange" />
|
||||
</div>
|
||||
<span>位置样式：</span>
|
||||
<el-radio-group v-model="styleType">
|
||||
<el-radio-button :value="1">点</el-radio-button>
|
||||
<el-radio-button :value="2">线</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div id="mapcontainer" style="flex: 1"></div>
|
||||
<el-col :span="24" class="container-right">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -58,7 +74,10 @@ import handcuffs from "@/assets/img/handcuffs.png";
|
||||
import { onMounted } from "vue";
|
||||
import { MapCustom } from "@/utils/mapCustom";
|
||||
import { ref } from "vue";
|
||||
|
||||
interface ListItem {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
let tabs = [
|
||||
{ label: "全部", value: "0" },
|
||||
{ label: "未处理", value: "1" },
|
||||
@ -67,8 +86,26 @@ let tabs = [
|
||||
let sectionType = ref(1);
|
||||
let styleType = ref(1);
|
||||
|
||||
const list = ref<ListItem[]>([]);
|
||||
const options = ref<ListItem[]>([]);
|
||||
const value = ref<string[]>([]);
|
||||
const loading = ref(false);
|
||||
|
||||
//处理展示数据
|
||||
const weekChange = (value: any) => {};
|
||||
const remoteMethod = (query: string) => {
|
||||
if (query) {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
options.value = list.value.filter((item) => {
|
||||
return item.label.toLowerCase().includes(query.toLowerCase());
|
||||
});
|
||||
}, 200);
|
||||
} else {
|
||||
options.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
new MapCustom({ dom: "mapcontainer" });
|
||||
@ -78,6 +115,24 @@ onMounted(() => {
|
||||
<style scoped lang="less">
|
||||
.container {
|
||||
overflow: hidden;
|
||||
.box {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e4e7ed;
|
||||
overflow: hidden;
|
||||
transition: 0.3s;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.el-card {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.el-row {
|
||||
height: 100%;
|
||||
.el-col {
|
||||
@ -156,6 +211,7 @@ onMounted(() => {
|
||||
.container-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.editTool {
|
||||
min-width: 761px;
|
||||
background: #fff;
|
||||
@ -170,5 +226,4 @@ onMounted(() => {
|
||||
.editTool-time {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
<div class="table-container">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :refresh="getData" :currentPage="page.index" :changePage="changePage">
|
||||
<template #toolbarBtn>
|
||||
<el-button type="primary" @click="visible = true">类型编辑</el-button>
|
||||
<el-button type="primary" @click="typeVisible = true">类型编辑</el-button>
|
||||
<el-button type="primary" @click="visible = true">新增用户</el-button>
|
||||
<el-button @click="handleImp">批量创建用户</el-button>
|
||||
<el-button @click="visible = true">导出</el-button>
|
||||
<el-button type="danger" @click="visible = true">删除</el-button>
|
||||
<el-button>导出</el-button>
|
||||
<el-button type="danger">删除</el-button>
|
||||
</template>
|
||||
<template #money="{ rows }"> ￥{{ rows.money }} </template>
|
||||
<template #thumb="{ rows }">
|
||||
@ -27,10 +27,10 @@
|
||||
</TableCustom>
|
||||
</div>
|
||||
<el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
|
||||
<TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" @cancel="closeDialog" />
|
||||
<TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" @close="closeDialog" />
|
||||
</el-dialog>
|
||||
<el-dialog title="重置密码" v-model="pwdVisible" width="700px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
|
||||
<TableEdit :form-data="rowData" :options="pwdOptions" :edit="true" :update="updateData" @cancel="handelCancel" />
|
||||
<TableEdit :form-data="rowData" :options="pwdOptions" :edit="true" :update="updateData" @close="handelCancel" />
|
||||
</el-dialog>
|
||||
<el-dialog title="编辑类型" v-model="typeVisible" width="800px" destroy-on-close :close-on-click-modal="false" @close="closeDialog">
|
||||
<UserType />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user