ljy/yak_handcuffs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2025年04月01日13:52:54

Browse Source
This commit is contained in:
luojiayi 2025-04-01 13:52:57 +08:00
parent f98ff78fa8
commit 6cedf36ce4
19 changed files with 197 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/assets/css/main.css
View File

@ -18,9 +18,9 @@ i {
}
.container {
padding: 20px;
flex: 1;
padding: 0 20px;
box-sizing: border-box;
}
.table-container {
@ -28,6 +28,7 @@ i {
padding: 22px 17px;
box-sizing: border-box;
border-radius: 5px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
.el-table th {
@ -98,4 +99,26 @@ i {
.noScrollbar {
scrollbar-width: none;
-ms-overflow-style: none;
}
.scrollbar {
overflow: auto;
}
.scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar::-webkit-scrollbar-thumb {
background-color: #B2B2B2;
border-radius: 4px;
}
.scrollbar::-webkit-scrollbar-track:hover {
background-color: #fff;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background-color: #909399;
}

12
src/components/table-edit.vue
View File

@ -19,6 +19,15 @@
<el-option v-for="opt in item.opts" :label="opt.label" :value="opt.value"></el-option>
</el-select>
<el-date-picker v-else-if="item.type === 'date'" type="date" v-model="form[item.prop]" :value-format="item.format"></el-date-picker>
<el-input
v-else-if="item.type === 'password'"
type="password"
v-model="form[item.prop]"
:disabled="item.disabled"
:placeholder="item.placeholder"
clearable
></el-input>
<el-switch
v-else-if="item.type === 'switch'"
v-model="form[item.prop]"
@ -39,6 +48,7 @@
</el-row>
<el-form-item>
<!-- <el-button @click="emit('cancel')">取 消</el-button> -->
<el-button type="primary" @click="saveEdit(formRef)">保 存</el-button>
</el-form-item>
</el-form>
@ -68,6 +78,8 @@ const { options, formData, edit, update } = defineProps({
},
});
const emit = defineEmits(["cancel"]);
const form = ref({ ...(edit ? formData : {}) });
const rules: FormRules = options.list

3
src/components/table-search.vue
View File

@ -69,10 +69,11 @@ const resetForm = (formEl: FormInstance | undefined) => {
<style scoped>
.search-container {
padding: 20px 30px 0;
padding: 20px 20px 0;
background-color: #fff;
margin-bottom: 10px;
border-radius: 5px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
.el-select {

19
src/layout/index.vue
View File

@ -4,7 +4,14 @@
<v-header />
<div class="main-container">
<div class="app-main" :class="{ 'content-collapse': sidebar.collapse }">
<el-scrollbar>
<router-view v-slot="{ Component }">
<transition name="move" mode="out-in">
<keep-alive>
<component :is="Component"></component>
</keep-alive>
</transition>
</router-view>
<!-- <el-scrollbar>
<router-view v-slot="{ Component }">
<transition name="move" mode="out-in">
<keep-alive>
@ -12,7 +19,7 @@
</keep-alive>
</transition>
</router-view>
</el-scrollbar>
</el-scrollbar> -->
</div>
</div>
</div>
@ -42,10 +49,14 @@ console.log(sidebar);
background-color: #f2f4fa;
}
.app-main {
height: 100vh;
// height: 100vh;
height: calc(100vh - 90px);
position: relative;
width: 100%;
padding-top: 70px;
display: flex;
flex-direction: column;
// padding-top: 70px;
margin-top: 70px;
box-sizing: border-box;
overflow: hidden;
}

25
src/views/incidentDispose/index.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="container">
<el-row :gutter="20">
<el-row :gutter="20" class="el_row">
<el-col :span="7">
<div class="incidentList">
<div class="tabs">
<div class="tabs-item" :class="`${index == 0 ? 'active' : ''}`" v-for="(item, index) in tabs" :key="index">{{ item.label }}</div>
</div>
<div class="list">
<div class="list-item active" v-for="item in 5" :key="item">
<div class="list scrollbar">
<div class="list-item active" v-for="item in 15" :key="item">
<div class="img">
<img :src="handcuffs" alt="" />
</div>
@ -29,7 +29,7 @@
</div>
</el-col>
<el-col :span="7">
<div class="info">
<div class="info scrollbar">
<div class="info-text">设备序号：05</div>
<div class="info-text">设备SN号：860116079430636</div>
<div class="info-text">告警时间：2025/03/26 18:33:32</div>
@ -138,7 +138,21 @@ onMounted(() => {
<style scoped lang="less">
.container {
overflow: hidden;
.el-row {
height: 100%;
.el-col {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
}
.incidentList {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
.tabs {
display: flex;
align-items: center;
@ -169,6 +183,7 @@ onMounted(() => {
}
}
.list {
flex: 1;
.list-item {
cursor: pointer;
padding: 0 15px;
@ -226,6 +241,8 @@ onMounted(() => {
height: 100%;
padding: 17px;
box-sizing: border-box;
// overflow: auto;
.info-text {
color: #061451;
font-size: 18px;

1
src/views/monitoringCenter/deviceHistory.vue
View File

@ -25,6 +25,7 @@
display: flex;
align-items: center;
justify-content: space-between;
transform: translateX(-10px);
.title {
&::before {
display: inline-block;

1
src/views/monitoringCenter/deviceRecord.vue
View File

@ -64,6 +64,7 @@ let columns = [
display: flex;
align-items: center;
justify-content: space-between;
transform: translateX(-10px);
.title {
&::before {
display: inline-block;

6
src/views/monitoringCenter/index.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="container">
<div class="container scrollbar">
<el-row :gutter="20">
<el-col :span="6"><DeviceInfo /></el-col>
<el-col :span="18">
<el-col :span="7"><DeviceInfo /></el-col>
<el-col :span="17">
<MonitoringTop />
<div v-if="false">
<div class="monitoringMap" id="mapcontainer"></div>

10
src/views/monitoringCenter/monitoringTop.vue
View File

@ -24,7 +24,7 @@ import heart from "@/assets/img/heart.png";
import temperature from "@/assets/img/temperature.png";
import blood from "@/assets/img/blood.png";
let funcList = [
{ title: "当前心率", en: "DANGQIANXINLV", icon: heart, unit: "次/分", num: 86, color: "#FF0303" },
{ title: "当前心率", en: "DANGQIANXINLV", icon: heart, unit: "次/分", num: 186, color: "#FF0303" },
{ title: "当前血氧", en: "DANGQIANXUEYANG", icon: blood, unit: "%", num: 99, color: "#8B51FD" },
{ title: "当前体表温度", en: "DANGQIANTIBIAOWENDU", icon: temperature, unit: "次/分", num: 86, color: "#FF6905" },
];
@ -41,6 +41,7 @@ let funcList = [
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.item-left {
display: flex;
flex-direction: column;
@ -69,8 +70,11 @@ let funcList = [
}
}
.item-img {
width: 80px;
height: 80px;
position: absolute;
right: 20px;
top: 20px;
width: 60px;
height: 60px;
flex-shrink: 0;
img {
width: 100%;

3
src/views/statisticalCenter/deviceHistory.vue
View File

@ -38,12 +38,15 @@ const value1 = ref("");
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
.card-head {
color: #061451;
font-size: 20px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translateX(-10px);
.title {
&::before {
display: inline-block;

3
src/views/statisticalCenter/emergencyList.vue
View File

@ -57,12 +57,15 @@ let columns = [
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
.card-head {
color: #061451;
font-size: 20px;
display: flex;
align-items: center;
justify-content: space-between;
transform: translateX(-10px);
.title {
&::before {
display: inline-block;

2
src/views/statisticalCenter/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="container">
<div class="container scrollbar">
<MonitoringTop />
<el-row :gutter="20" style="margin-top: 20px; height: 380px">
<el-col :span="16">

8
src/views/statisticalCenter/monitoringTop.vue
View File

@ -25,7 +25,7 @@ import onLine from "@/assets/img/onLine.png";
import report from "@/assets/img/report.png";
import newly from "@/assets/img/newly.png";
let funcList = [
{ title: "手铐总数", en: "SHOUKAOZONGSHU", icon: handcuffs, num: 326, color: "##71DDF9" },
{ title: "手铐总数", en: "SHOUKAOZONGSHU", icon: handcuffs, num: 1326, color: "##71DDF9" },
{ title: "在线数量", en: "SHOUKAOZONGSHU", icon: onLine, num: 326, color: "##71DDF9" },
{ title: "告警数量", en: "SHOUKAOZONGSHU", icon: report, num: 99, color: "#8B51FD" },
{ title: "较昨日新增", en: "SHOUKAOZONGSHU", icon: newly, num: 86, color: "#FF6905" },
@ -43,6 +43,9 @@ let funcList = [
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 5px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
position: relative;
.item-left {
display: flex;
flex-direction: column;
@ -71,6 +74,9 @@ let funcList = [
}
}
.item-img {
position: absolute;
right: 20px;
top: 20px;
width: 80px;
height: 80px;
flex-shrink: 0;

3
src/views/statisticalCenter/onLineStatistics.vue
View File

@ -15,6 +15,8 @@
box-sizing: border-box;
position: relative;
display: flex;
border-radius: 5px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
.card-head {
position: absolute;
@ -23,6 +25,7 @@
display: flex;
align-items: center;
justify-content: space-between;
transform: translateX(-10px);
.title {
&::before {
display: inline-block;

36
src/views/synthesizeManage/areaManage/index.vue
View File

@ -2,16 +2,7 @@
<div class="container">
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
<div class="table-container">
<TableCustom
:columns="columns"
:tableData="tableData"
:total="page.total"
:delFunc="handleDelete"
:editFunc="handleEdit"
:refresh="getData"
:currentPage="page.index"
:changePage="changePage"
>
<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>导出</el-button>
@ -26,9 +17,9 @@
{{ rows.state ? "正常" : "异常" }}
</el-tag>
</template>
<template #operator>
<el-button link type="primary" size="small"> 修改 </el-button>
<el-button link type="danger" size="small"> 删除 </el-button>
<template #operator="{ rows }">
<el-button link type="primary" size="small" @click="handleEdit(rows)"> 修改 </el-button>
<el-button link type="danger" size="small" @click="handelDel(rows)"> 删除 </el-button>
</template>
</TableCustom>
</div>
@ -38,7 +29,7 @@
<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { CirclePlusFilled } from "@element-plus/icons-vue";
import { fetchData } from "@/api/index";
import TableCustom from "@/components/table-custom.vue";
@ -98,16 +89,23 @@ const changePage = (val: number) => {
const addRef = ref();
const visible = ref(false);
const rowData = ref({});
// 编辑
const handleEdit = (row: TableItem) => {
rowData.value = { ...row };
visible.value = true;
};
// 删除相关
const handleDelete = (row: TableItem) => {
ElMessage.success("删除成功");
// 删除
const handelDel = (row: TableItem) => {
ElMessageBox.confirm("确定要删除吗？", "提示", {
type: "warning",
})
.then(async () => {
// ElMessage.success("删除成功");
})
.catch(() => {});
};
// 删除相关
// 新增
const handleAdd = () => {
visible.value = true;
};

2
src/views/synthesizeManage/deviceInfo/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="container">
<div class="container scrollbar">
<el-card class="baseInfo">
<template #header>
<div class="card-header">基本信息</div>

31
src/views/synthesizeManage/deviceManage/index.vue
View File

@ -2,16 +2,7 @@
<div class="container">
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
<div class="table-container">
<TableCustom
:columns="columns"
:tableData="tableData"
:total="page.total"
:delFunc="handleDelete"
:editFunc="handleEdit"
:refresh="getData"
:currentPage="page.index"
:changePage="changePage"
>
<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>
@ -28,12 +19,12 @@
{{ rows.state ? "正常" : "异常" }}
</el-tag>
</template>
<template #operator>
<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="handleEdit"> 修改 </el-button>
<el-button link type="danger" size="small"> 删除 </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>
</template>
</TableCustom>
</div>
@ -45,7 +36,7 @@
<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchData } from "@/api/index";
import TableCustom from "@/components/table-custom.vue";
import TableSearch from "@/components/table-search.vue";
@ -119,6 +110,7 @@ const handleAdd = () => {
visible.value = true;
};
// 编辑
const handleEdit = (row: TableItem) => {
// rowData.value = { ...row };
TableEditOptions.value.list = editOp;
@ -126,6 +118,17 @@ const handleEdit = (row: TableItem) => {
visible.value = true;
};
// 删除
const handelDel = (row: TableItem) => {
ElMessageBox.confirm("确定要删除吗？", "提示", {
type: "warning",
})
.then(async () => {
// ElMessage.success("删除成功");
})
.catch(() => {});
};
const updateData = () => {
closeDialog();
getData();

22
src/views/synthesizeManage/mapLocation/index.vue
View File

@ -6,8 +6,8 @@
<div class="head">
<div class="head-text">选择设备（SN列表）</div>
</div>
<div class="list">
<div class="list-item" :class="`${index == 0 ? 'active' : ''}`" v-for="(item, index) in 5" :key="item">
<div class="list scrollbar">
<div class="list-item" :class="`${index == 0 ? 'active' : ''}`" v-for="(item, index) in 15" :key="item">
<div class="img">
<img :src="handcuffs" alt="" />
</div>
@ -24,7 +24,6 @@
<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>
@ -77,11 +76,27 @@ onMounted(() => {
</script>
<style scoped lang="less">
.container {
overflow: hidden;
.el-row {
height: 100%;
.el-col {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
}
}
.incidentList {
height: 100%;
display: flex;
flex-direction: column;
.head {
background-color: #fff;
height: 70px;
line-height: 70px;
flex-shrink: 0;
.head-text {
color: #061451;
@ -100,6 +115,7 @@ onMounted(() => {
}
}
.list {
flex: 1;
.list-item {
cursor: pointer;
padding: 0 15px;

59
src/views/synthesizeManage/userManage/index.vue
View File

@ -2,16 +2,7 @@
<div class="container">
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
<div class="table-container">
<TableCustom
:columns="columns"
:tableData="tableData"
:total="page.total"
:delFunc="handleDelete"
:editFunc="handleEdit"
:refresh="getData"
:currentPage="page.index"
:changePage="changePage"
>
<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="visible = true">新增用户</el-button>
@ -28,15 +19,18 @@
{{ rows.state ? "正常" : "异常" }}
</el-tag>
</template>
<template #operator>
<el-button link type="primary" size="small"> 重置密码 </el-button>
<el-button link type="primary" size="small"> 修改 </el-button>
<el-button link type="danger" size="small"> 删除 </el-button>
<template #operator="{ rows }">
<el-button link type="primary" size="small" @click="pwdVisible = 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>
</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="options" :edit="isEdit" :update="updateData" />
<TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" @cancel="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" />
</el-dialog>
<BatchImp ref="batchImpRef" />
</div>
@ -44,7 +38,7 @@
<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { fetchData } from "@/api/index";
import TableCustom from "@/components/table-custom.vue";
import TableSearch from "@/components/table-search.vue";
@ -57,6 +51,8 @@ import { FormOption, FormOptionList } from "@/types/form-option";
const query = reactive({
name: "",
});
const batchImpRef = ref();
const searchOpt = ref<FormOptionList[]>([
{ type: "input", label: "用户名：", prop: "name" },
{
@ -81,7 +77,6 @@ const searchOpt = ref<FormOptionList[]>([
],
},
]);
const batchImpRef = ref();
// 表格相关
let columns = ref([
@ -135,14 +130,38 @@ let options = ref<FormOption>({
{ type: "textarea", label: "备注", prop: "mon8ey" },
],
});
// 新增/编辑弹窗相关
let pwdOptions = ref<FormOption>({
labelWidth: "100px",
span: 24,
list: [
{ type: "password", label: "原始密码", prop: "name1", required: true },
{ type: "password", label: "新密码", prop: "money2", required: true },
{ type: "password", label: "确认密码", prop: "money3", required: true },
],
});
const visible = ref(false);
const pwdVisible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
// 删除相关
const handelDel = (row: TableItem) => {
ElMessageBox.confirm("确定要删除吗？", "提示", {
type: "warning",
})
.then(async () => {
// ElMessage.success("删除成功");
})
.catch(() => {});
};
// 修改相关
const handleEdit = (row: TableItem) => {
rowData.value = { ...row };
isEdit.value = true;
visible.value = true;
};
const updateData = () => {
closeDialog();
getData();
@ -153,9 +172,9 @@ const closeDialog = () => {
isEdit.value = false;
};
// 删除相关
const handleDelete = (row: TableItem) => {
ElMessage.success("删除成功");
const handelCancel = () => {
rowData.value = {};
pwdVisible.value = false;
};
</script>