From 78fd3b7c43b631266707d095f9c8bdba1fe044ea Mon Sep 17 00:00:00 2001
From: SunTao <328867980@qq.com>
Date: Thu, 17 Oct 2024 11:26:09 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E7=BB=88=E7=AB=AF=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/xj/terminal.js                        |  45 +++
 .../components/terminal-add.vue               | 202 ++++++++++++
 src/views/xj/route/route-terminal/index.vue   | 290 ++++++++++++++++++
 3 files changed, 537 insertions(+)
 create mode 100644 src/api/xj/terminal.js
 create mode 100644 src/views/xj/route/route-terminal/components/terminal-add.vue
 create mode 100644 src/views/xj/route/route-terminal/index.vue

diff --git a/src/api/xj/terminal.js b/src/api/xj/terminal.js
new file mode 100644
index 0000000..6dc03c9
--- /dev/null
+++ b/src/api/xj/terminal.js
@@ -0,0 +1,45 @@
+import request from "@/utils/request";
+
+// 查询设备列表
+export function getTerminalList(params) {
+  return request({
+    url: "/api/aiot/list",
+    method: "get",
+    params,
+  });
+}
+
+// 删除作业范围
+export function deleteTerminal(query) {
+  return request({
+    url: "/api/aiot/delete",
+    method: "delete",
+    data: query,
+  });
+}
+
+//  新增作业范围
+export function addTerminal(query) {
+  return request({
+    url: "/api/aiot/add",
+    method: "post",
+    data: query,
+  });
+}
+
+// 修改作业范围
+export function updateTerminal(query) {
+  return request({
+    url: "/api/v2/segment/update",
+    method: "put",
+    data: query,
+  });
+}
+
+// 查询设备详情根据id
+export function getTerminalById(id) {
+  return request({
+    url: "/dev-api/api/aiot/get" + id,
+    method: "get",
+  });
+}
diff --git a/src/views/xj/route/route-terminal/components/terminal-add.vue b/src/views/xj/route/route-terminal/components/terminal-add.vue
new file mode 100644
index 0000000..1a467dc
--- /dev/null
+++ b/src/views/xj/route/route-terminal/components/terminal-add.vue
@@ -0,0 +1,202 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-17 11:01:18
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-17 11:24:08
+ * @FilePath: \znxjxt-ui\src\views\xj\route\route-terminal\components\terminal-add.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="add-content">
+    <div class="add-form">
+      <el-form
+        ref="dialogForm"
+        :model="dialogForm"
+        :rules="rules"
+        label-width="120px"
+      >
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="设备编号" prop="clientid">
+              <el-input
+                v-model="dialogForm.clientid"
+                placeholder="请输入设备编号"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="所属车辆" prop="plateno">
+                <el-input
+                v-model="dialogForm.plateno"
+                placeholder="请输入所属车辆"
+                clearable
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="24">
+          <el-col :span="12">
+            <el-form-item label="作业范围" prop="areas">
+              <el-select
+                v-model="dialogForm.areas"
+                placeholder="请选择作业范围"
+                multiple
+                collapse-tags
+              >
+                <el-option
+                  v-for="dict in bindCarList"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="备注" prop="remark">
+              <el-input
+                type="textarea"
+                v-model="dialogForm.remark"
+                rows="3"
+                resize="none"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <div class="bottom-map">
+      <fssm-map
+        @endEoordinate="geteoordinate"
+        :editCoordinates="editCoordinates"
+        :showChange="true"
+        :showZoom="false"
+        :showDraw="false"
+      ></fssm-map>
+    </div>
+    <div class="dialog-footer">
+      <el-button type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addTerminal, updateTerminal } from "@/api/xj/terminal";
+import FssmMap from "@/components/map/fssm-map";
+export default {
+  components: { FssmMap },
+  name: "TerminalAdd",
+  props: {
+    dialogItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      // 表单绑定
+      dialogForm: {
+        clientid: "",
+        plateno: "",
+        areas: [],
+        remark: "",
+      },
+      rules: {
+        clientid: [
+          { required: true, message: "设备编号不能为空", trigger: "blur" },
+        ],
+        plateno: [
+          { required: true, message: "所属车辆不能为空", trigger: "blur" },
+        ],
+        areas: [
+          { required: true, message: "请选择作业范围", trigger: "change" },
+        ],
+        coordinates: [
+          {
+            required: true,
+            message: "请在下方地图添加作业范围",
+            trigger: "blur",
+          },
+        ],
+      },
+      // 根据id查询到的区域坐标
+      editCoordinates: [],
+    };
+  },
+  watch: {
+    dialogItem: {
+      handler(val) {
+        if (val.title === "修改") {
+          const a =
+            "122.2772084092066,42.1903654574782;122.4566518803403,41.91936930784885;123.0608999272153,41.9541594027907;122.9638539170191,42.419247153717315;122.37425425176474,42.413753989654815;122.36143698071095,42.24529693046514;122.2772084092066,42.1903654574782";
+          this.dialogForm.coordinates = a;
+          this.editCoordinates = a.split(";").map((item) => {
+            return item.split(",");
+          });
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  created() {},
+  methods: {
+    /* 获取多边形坐标方法 */
+    geteoordinate(list) {
+      this.dialogForm.coordinates = list.join(";");
+    },
+    /* 点击取消事件 */
+    cancel() {
+      this.$emit("addCancel");
+    },
+    /* 点击确认事件 */
+    submitForm() {
+      this.$refs["dialogForm"].validate((valid) => {
+        if (valid) {
+          if (this.dialogItem.title === "修改") {
+            updateTerminal(this.dialogForm).then(({ data, code }) => {
+              if (code === 200) {
+                this.$emit("addCancel");
+              }
+            });
+          } else {
+            addTerminal(this.dialogForm).then(({ data, code }) => {
+              if (code === 200) {
+                this.$emit("addCancel");
+              }
+            });
+          }
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.add-content {
+  width: 100%;
+  height: 100%;
+
+  .add-form {
+    .el-select {
+      width: 100%;
+    }
+  }
+
+  .bottom-map {
+    width: 100%;
+    height: 30rem;
+  }
+
+  .dialog-footer {
+    width: 100%;
+    height: 2.5rem;
+    margin-top: 1rem;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/xj/route/route-terminal/index.vue b/src/views/xj/route/route-terminal/index.vue
new file mode 100644
index 0000000..e90f42d
--- /dev/null
+++ b/src/views/xj/route/route-terminal/index.vue
@@ -0,0 +1,290 @@
+<!--
+ * @Author: SunTao 328867980@qq.com
+ * @Date: 2024-10-17 10:40:54
+ * @LastEditors: SunTao 328867980@qq.com
+ * @LastEditTime: 2024-10-17 10:53:59
+ * @FilePath: \znxjxt-ui\src\views\xj\route\route-terminal\index.vue
+ * @Description: 路线管理-终端管理
+-->
+
+<template>
+  <div class="section-content">
+    <!-- 搜索表单 -->
+    <div class="section-form">
+      <el-form
+        :model="sectionForm"
+        ref="queryForm"
+        size="small"
+        :inline="true"
+        label-width="6rem"
+      >
+        <el-form-item label="设备编号" prop="clientid">
+          <el-input
+            v-model="sectionForm.clientid"
+            placeholder="请输入设备编号"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="mini"
+            @click="handleQuery"
+            >搜索</el-button
+          >
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+            >重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="btn-row">
+      <el-button
+        type="primary"
+        plain
+        icon="el-icon-plus"
+        size="mini"
+        @click="handleAdd"
+        >新增
+      </el-button>
+    </div>
+    <!-- 列表 -->
+    <el-table
+      ref="roadTable"
+      v-loading="loading"
+      :data="sectionList"
+      @selection-change="handleSelectionChange"
+      style="width: 100%"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="设备编号" align="center" prop="segmentCode" />
+      <el-table-column label="所属车辆" align="center" prop="segmentCode" />
+      <el-table-column label="作业范围" align="center" prop="segmentCode" />
+      <el-table-column label="设备状态" align="center" prop="name" />
+      <el-table-column label="网络连接" align="center" prop="name" />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="viewTable(scope.row)"
+            >查看
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="editTable(scope.row)"
+            >修改
+          </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="deleteTable(scope.row)"
+            >删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页组件 -->
+    <div class="pagination-part">
+      <el-pagination
+        background
+        :current-page.sync="pagination.page"
+        @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size.sync="pagination.size"
+        @size-change="handleSizeChange"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="tableTotal"
+      >
+      </el-pagination>
+    </div>
+    <!-- 新增/修改弹窗 -->
+    <el-dialog
+      :title="addTitle"
+      :visible.sync="addVisible"
+      width="60%"
+      append-to-body
+      :close-on-click-modal="false"
+      destroy-on-close
+      @close="addCancel"
+    >
+      <terminal-add
+        :dialogItem="dialogItem"
+        @addCancel="addCancel"
+      ></terminal-add>
+    </el-dialog>
+  </div>
+</template>
+    
+<script>
+import { getTerminalList, deleteTerminal } from "@/api/xj/terminal";
+import TerminalAdd from "./components/terminal-add.vue";
+
+export default {
+  components: { TerminalAdd },
+  name: "RouteTerminal",
+  data() {
+    return {
+      // 搜索表单
+      sectionForm: {
+        // segmentCode: "",
+        clientid: "",
+      },
+      // 查询表单
+      searchForm: {},
+      // 列表加载状态
+      loading: false,
+      // 非多个禁用
+      multiple: true,
+      // 列表数据
+      sectionList: [],
+      // 列表已选数组
+      checkIds: [],
+      // 分页-列表总数
+      tableTotal: 0,
+      // 分页-页数页码
+      pagination: {
+        page: 1,
+        size: 10,
+      },
+      // 弹窗标题
+      addTitle: "",
+      // 弹窗显隐控制
+      addVisible: false,
+      // 传弹窗数据
+      dialogItem: {},
+    };
+  },
+  mounted() {},
+  created() {
+    this.getTableList();
+  },
+  methods: {
+    /* 点击搜索事件 */
+    handleQuery() {
+      this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
+      this.getTableList();
+    },
+    /* 点击重置事件 */
+    resetQuery() {
+      this.sectionForm = {
+        // segmentCode: "",
+        clientid: "",
+      };
+      this.searchForm = {};
+      this.getTableList();
+    },
+    /* 获取列表数据 */
+    getTableList() {
+      const params = {
+        ...this.searchForm,
+        ...this.pagination,
+      };
+      getTerminalList(params).then(({ code, data }) => {
+        if (code === 200) {
+          this.sectionList = data.rows;
+        }
+      });
+    },
+    /* 点击新增 */
+    handleAdd() {
+      this.addTitle = "新增设备";
+      this.dialogItem = {
+        title: "新增",
+      };
+      this.addVisible = true;
+    },
+    /* 列表选择改变事件 */
+    handleSelectionChange(selection) {
+      this.checkIds = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /* 列表查看事件 */
+    viewTable() {},
+    /* 列表修改事件 */
+    editTable() {
+      this.addTitle = "修改设备";
+      this.dialogItem = {
+        title: "修改",
+      };
+      this.addVisible = true;
+    },
+    /* 列表删除/批量删除事件 */
+    deleteTable(row) {
+      const checkIds = row ? [row.id] : this.checkIds;
+      if (!checkIds.length) {
+        this.$modal.msgWarning("请选择要删除的记录");
+        return;
+      }
+      this.$modal
+        .confirm(`是否确认删除选中的${checkIds.length}条记录？`)
+        .then(() => {
+          return deleteTerminal(checkIds);
+        })
+        .then(() => {
+          this.getTableList();
+          this.$refs.roadTable.clearSelection();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    /* 切换分页 */
+    handleCurrentChange(arg) {
+      this.pagination.page = arg;
+      this.getTableList();
+    },
+    /* 切换每条/页 */
+    handleSizeChange(arg) {
+      this.pagination.size = arg;
+      this.getTableList();
+    },
+    /* 关闭弹窗事件 */
+    addCancel() {
+      this.addTitle = "";
+      this.dialogItem = {};
+      this.addVisible = false;
+    },
+  },
+};
+</script>
+    
+    <style lang="scss" scoped>
+.section-content {
+  width: 100%;
+  height: calc(100vh - 5.3rem);
+  padding: 1rem;
+}
+
+.section-form {
+  width: 100%;
+  height: 5%;
+}
+
+.btn-row {
+  height: 6%;
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+}
+
+/* 分页样式 */
+.pagination-part {
+  width: 100%;
+  display: flex;
+  padding-top: 1rem;
+  justify-content: flex-end;
+}
+</style>
+    
\ No newline at end of file