This commit is contained in:
陈鹏鹏 2023-09-27 14:41:18 +08:00
parent 60cc53b7b0
commit 5379db9ebb
2 changed files with 407 additions and 3 deletions

View File

@ -0,0 +1,362 @@
<template>
<div id="content" ref="content">
<TableBody
v-bind="data"
@handleTableHeader="handleTableHeader"
@handleTablePagination="handleTablePagination"
>
<!-- <template #TableHeaderRight>
<div class="sear">
<el-text class="encrypt">排序方式</el-text>
<el-select
v-model="value"
class="m-2"
placeholder="Select"
size="large"
>
<el-option label="升序" value="ASC" />
<el-option label="降序" value="DESC" />
</el-select>
</div>
</template> -->
<template #doIt="{ currentCol, currentData }">
<span
style="
font-size: 14px;
color: #409eff;
margin-right: 10px;
cursor: pointer;
"
@click.stop="handleGg(currentData)"
>
详情</span
>
</template>
</TableBody>
<el-dialog
v-model="state.Monitoring"
title="查询条件"
width="30%"
destroy-on-close
>
<el-form
class="form"
ref="ruleFormRef"
:rules="rules"
:model="state.formState"
label-width="120px"
>
<el-form-item label="在线状态">
<el-select
v-model="state.formState.isOnline"
placeholder="请选择"
clearable
>
<el-option label="在线" value="1" />
<el-option label="离线" value="2" />
</el-select>
</el-form-item>
<el-form-item label="是否已经接入">
<el-select
v-model="state.formState.access"
placeholder="请选择"
clearable
>
<el-option label="已接入" value="1" />
<el-option label="未接入" value="2" />
</el-select>
</el-form-item>
<el-form-item label="是否是虚拟通道">
<el-radio-group v-model="state.formState.isVirtual">
<el-radio label="1"></el-radio>
<el-radio label="2"></el-radio>
</el-radio-group>
</el-form-item>
<div style="display: flex; justify-content: center">
<el-button type="primary" @click="onAffirm(ruleFormRef)"
>提交</el-button
>
</div>
</el-form>
</el-dialog>
<!-- 详情 -->
<el-dialog v-model="state.channeldetails" title="查询条件" width="40%">
<el-form
class="form"
ref="ruleFormRef"
:rules="rules"
:model="state.formState"
>
<div style="display: flex">
<el-form-item label="设备编码:">
<el-text type="primary">{{ form.deviceCode }}</el-text>
</el-form-item>
<el-form-item label="单元类型:">
<el-text type="primary">{{ form.unitType }}</el-text>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="单元序号:">
<el-text type="primary">{{ form.unitSeq }}</el-text>
</el-form-item>
<el-form-item label="通道序号:">
<el-text type="primary">{{ form.channelSeq }}</el-text>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="通道编码:">
<el-text type="primary">{{ form.channelCode }}</el-text>
</el-form-item>
<el-form-item label="通道标识码:">
<el-text type="primary">{{ form.channelSn }}</el-text>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="通道名称:">
<el-text type="primary">{{ form.channelName }}</el-text>
</el-form-item>
<el-form-item label="通道类型:">
<el-text type="primary">{{ form.channelType }}</el-text>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="摄像头类型:">
<el-text type="primary">{{ form.cameraType }}</el-text>
</el-form-item>
<el-form-item label="所属组织编码:">
<el-text type="primary">{{ form.ownerCode }}</el-text>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="经度:">
<el-text type="primary">{{ form.gpsX }}</el-text>
</el-form-item>
<el-form-item label="纬度:">
<el-text type="primary">{{ form.gpsY }}</el-text>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="z轴">
<el-text type="primary">{{ form.gpsZ }}</el-text>
</el-form-item>
<el-form-item label="光栅图ID">
<el-text type="primary">{{ form.mapId }}</el-text>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="域ID">
<el-text type="primary">{{ form.domainId }}</el-text>
</el-form-item>
<el-form-item label="描述:">
<el-text type="primary">{{ form.memo }}</el-text>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="状态:">
<el-text type="primary">{{ form.isOnline }}</el-text>
</el-form-item>
<el-form-item label="能力集:">
<el-text type="primary">{{ form.stat }}</el-text>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="是否已经接入:">
<el-text type="primary">{{ form.capability }}</el-text>
</el-form-item>
<el-form-item label="能力集:">
<el-text type="primary">{{ form.access }}</el-text>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="通道详情扩展信息:">
<el-text type="primary">{{ form.chExt }}</el-text>
</el-form-item>
<el-form-item label="是否是虚拟通道:">
<el-text type="primary">{{ form.isVirtual }}</el-text>
</el-form-item>
</div>
</el-form>
</el-dialog>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import TableBody from "@/components/TableBody/TableBody.vue";
import http from "../../utils/request";
import tools from "@/utils/tools";
import { ElMessage } from "element-plus";
const state = reactive({
Monitoring: false,
channeldetails: false,
formState: {
isOnline: "",
access: "",
isVirtual: "",
pageNum: "",
pageSize: "",
},
});
const ruleFormRef = ref();
const form = ref({});
const data = reactive({
/**
* @type {Object}
* @description 表格头部
*/
tableHeader: [
{
buttons: [
{
type: "custom", // custom ,
name: "addOne", // handleTableHeader
title: "查询", //
disabled: false,
},
],
},
{
buttons: [],
},
],
/**
* @type {Array}
* @description 表格参数
*/
tableType: {
selection: false, //
tableLoading: false, // loading
dbclick: true, //
},
/**
* @type {Array}
* @description 表格配置
*/
tableList: [
{
label: "设备编码",
name: "deviceCode",
show: true,
// type: "slot",
},
{
label: "单元类型",
name: "unitType",
show: true,
// type: "slot",
},
{
label: "单元序号",
name: "unitSeq",
show: true,
},
{
label: "通道序号",
name: "channelSeq",
show: true,
},
{
label: "通道编码",
name: "channelCode",
show: true,
},
{
label: "通道标识码",
name: "channelSn",
show: true,
},
{
label: "通道名称",
name: "channelName",
show: true,
},
{
label: "通道类型",
name: "unitchannelTypeSeq",
show: true,
},
{
type: "slot", // slot 使
name: "doIt", // name
label: "操作",
show: true, //
sortable: false,
width: "170px",
},
],
/**
* @type {Array}
* @description 表格数据(模拟数据)
*/
tableData: [],
/**
* @type {Object}
* @description 分页数据
*/
pagination: {
pageSize: 10,
current: 1,
total: 11,
},
});
//
const handleTableHeader = ({ type, data }) => {
switch (type) {
case "addOne":
addNew();
break;
case "addMore":
break;
case "downloadMb":
break;
case "search":
break;
case "refresh":
break;
case "advanced":
break;
case "download":
break;
}
};
//
const handleTablePagination = (current) => {
data.pagination.current = current;
onAffirm()
};
const addNew = () => {
state.Monitoring = true;
};
const onAffirm = () => {
state.formState.pageNum = data.pagination.current;
state.formState.pageSize = data.pagination.pageSize;
http
.post("/api/device/channel/subsystem/page", state.formState)
.then((res) => {
if (res.code == "0") {
data.tableData = res.data.pageData;
data.pagination.current = res.data.currentPage;
data.pagination.pageSize = res.data.pageSize;
data.pagination.total = res.data.totalRows;
}
});
};
const handleGg = (obj) => {
console.log(obj);
form.value = obj;
state.channeldetails = true;
};
onMounted(() => {
onAffirm();
});
</script>
<style lang="scss" scoped>
.sear {
display: flex;
.encrypt {
width: 150px;
}
}
</style>

View File

@ -1,6 +1,24 @@
<template>
<div id="content" ref="content">
<TableBody v-bind="data" @handleTableHeader="handleTableHeader">
<TableBody
v-bind="data"
@handleTableHeader="handleTableHeader"
@handleTablePagination="handleTablePagination"
>
<template #TableHeaderRight>
<div class="search">
<el-text class="encrypt">视频通道编码</el-text>
<el-input v-model="condition.channelId" @change="get()" />
</div>
<div class="search">
<el-text class="encrypt">设备监测点编码</el-text>
<el-input v-model="condition.monitoringPointCode" @change="get()" />
</div>
<div class="search">
<el-text class="encrypt">设备监测点名称</el-text>
<el-input v-model="condition.monitoringPointName" @change="get()" />
</div>
</template>
<template #doIt="{ currentCol, currentData }">
<span
style="
@ -177,7 +195,7 @@ const data = reactive({
* @description 分页数据
*/
pagination: {
pageSize: 20,
pageSize: 10,
current: 1,
total: 1,
},
@ -203,15 +221,33 @@ const handleTableHeader = ({ type, data }) => {
}
};
//
const handleTablePagination = (current) => {
data.pagination.current = current;
get();
};
const addNew = () => {
state.Monitoring = true;
};
const condition = reactive({
page: "",
size: "",
channelId: "",
monitoringPointCode: "",
monitoringPointName: "",
});
//
const get = () => {
http.get(`/api/monitoring/point`).then((res) => {
condition.page = data.pagination.current;
condition.size = data.pagination.pageSize;
http.get(`/api/monitoring/point`, condition).then((res) => {
console.log(res);
if (res.code === 200) {
data.tableData = res.data.records;
data.pagination.current = res.data.current;
data.pagination.pageSize = res.data.size;
data.pagination.total = res.data.total;
}
});
};
@ -293,5 +329,11 @@ onMounted(() => {
<style lang="scss" scoped>
.search {
display: flex;
.encrypt {
width: 150px;
}
}
</style>