This commit is contained in:
parent
60cc53b7b0
commit
5379db9ebb
|
|
@ -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>
|
||||||
|
|
@ -1,6 +1,24 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="content" ref="content">
|
<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 }">
|
<template #doIt="{ currentCol, currentData }">
|
||||||
<span
|
<span
|
||||||
style="
|
style="
|
||||||
|
|
@ -177,7 +195,7 @@ const data = reactive({
|
||||||
* @description 分页数据
|
* @description 分页数据
|
||||||
*/
|
*/
|
||||||
pagination: {
|
pagination: {
|
||||||
pageSize: 20,
|
pageSize: 10,
|
||||||
current: 1,
|
current: 1,
|
||||||
total: 1,
|
total: 1,
|
||||||
},
|
},
|
||||||
|
|
@ -203,15 +221,33 @@ const handleTableHeader = ({ type, data }) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 表格分页事件
|
||||||
|
const handleTablePagination = (current) => {
|
||||||
|
data.pagination.current = current;
|
||||||
|
get();
|
||||||
|
};
|
||||||
|
|
||||||
const addNew = () => {
|
const addNew = () => {
|
||||||
state.Monitoring = true;
|
state.Monitoring = true;
|
||||||
};
|
};
|
||||||
|
const condition = reactive({
|
||||||
|
page: "",
|
||||||
|
size: "",
|
||||||
|
channelId: "",
|
||||||
|
monitoringPointCode: "",
|
||||||
|
monitoringPointName: "",
|
||||||
|
});
|
||||||
//监测点列表
|
//监测点列表
|
||||||
const get = () => {
|
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);
|
console.log(res);
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
data.tableData = res.data.records;
|
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>
|
<style lang="scss" scoped>
|
||||||
|
.search {
|
||||||
|
display: flex;
|
||||||
|
.encrypt {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue