From 5379db9ebb52b4851495023313c4e52d7b2e10d2 Mon Sep 17 00:00:00 2001
From: "chenpp@ydoo.com" <chenpp@ydool.com>
Date: Wed, 27 Sep 2023 14:41:18 +0800
Subject: [PATCH] gx

---
 src/views/form/devicechannel.vue    | 362 ++++++++++++++++++++++++++++
 src/views/form/monitoringpoints.vue |  48 +++-
 2 files changed, 407 insertions(+), 3 deletions(-)
 create mode 100644 src/views/form/devicechannel.vue

diff --git a/src/views/form/devicechannel.vue b/src/views/form/devicechannel.vue
new file mode 100644
index 0000000..9e0c378
--- /dev/null
+++ b/src/views/form/devicechannel.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/form/monitoringpoints.vue b/src/views/form/monitoringpoints.vue
index a8acf6f..55d34d6 100644
--- a/src/views/form/monitoringpoints.vue
+++ b/src/views/form/monitoringpoints.vue
@@ -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>
   
\ No newline at end of file