From f9bf0d5b0478df1c1869dda2c28985695c10bccb Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Mon, 5 Aug 2024 15:10:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../machinery/coding/component/BindIOT.vue    | 257 ++++++++++++++++++
 .../machinery/coding/component/MapDIalog.vue  | 180 ++++++++++++
 .../machinery/coding/index.vue                |   2 +-
 3 files changed, 438 insertions(+), 1 deletion(-)
 create mode 100644 sgzb-ui/src/views/warehouseManage/machinery/coding/component/BindIOT.vue
 create mode 100644 sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue

diff --git a/sgzb-ui/src/views/warehouseManage/machinery/coding/component/BindIOT.vue b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/BindIOT.vue
new file mode 100644
index 00000000..094fe3f8
--- /dev/null
+++ b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/BindIOT.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="app-container" v-if="props.isShow">
+    <PageHeader :pageContent="pageContent" @goBack="goBack" />
+    <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px" v-show="showSearch">
+      <el-form-item label="关键字" prop="keyWord">
+        <el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" @keyup.enter.native="handleQuery" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" size="small" @click="bindNewIOT">绑定新设备</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column
+        type="index"
+        label="序号"
+        align="center"
+        width="55"
+        :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
+      />
+      <el-table-column label="设备类型" prop="iotTypeName" align="center" />
+      <el-table-column label="设备编号" prop="iotCode" align="center" />
+      <el-table-column label="设备状态" prop="iotStatus" align="center">
+        <!-- iotStatus 0 在线 1 掉线 -->
+        <template v-slot="{ row }">
+          <el-tag v-if="row.iotStatus == 0" type="success">在线</el-tag>
+          <el-tag v-else type="danger">掉线</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="绑定日期" prop="bindTime" align="center" />
+
+      <el-table-column label="操作" align="center">
+        <template v-slot="{ row }">
+          <el-button type="text" size="small" @click="handleUnbind(row)" style="color: red" icon="el-icon-connection">解绑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 绑定设备 -->
+    <el-dialog title="绑定设备" :visible.sync="IOTOpen" width="500px" append-to-body :rules="rules">
+      <el-form :model="IOTForm" ref="IOTForm" label-width="120px" size="small" :rules="rules">
+        <el-form-item label="设备类型" prop="iotType">
+          <el-select
+            v-model="IOTForm.iotType"
+            filterable
+            clearable
+            placeholder="请选择"
+            style="width: 280px"
+            @change="changeIotType"
+          >
+            <el-option
+              v-for="item in typeOptions"
+              :key="item.iotTypeId"
+              :label="item.iotTypeName"
+              :value="item.iotTypeId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备编号" prop="iotId">
+          <el-select v-model="IOTForm.iotId" filterable clearable placeholder="请选择" style="width: 280px">
+            <el-option v-for="item in codeOptions" :key="item.iotId" :label="item.iotCode" :value="item.iotId" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="IOTOpen = false">取 消</el-button>
+        <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import PageHeader from '@/components/pageHeader'
+import { selectList, bindIot, getTypeList, unbindIot } from '@/api/store/iotManagement'
+
+export default {
+  name: 'BindIOT',
+  props: {
+    props: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: {
+    PageHeader,
+  },
+  data() {
+    return {
+      loading: false,
+      showSearch: true, // 是否显示搜索
+      queryForm: {
+        keyWord: '',
+      },
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      tableData: [],
+      pageContent: 'IOT设备查看',
+      IOTForm: {
+        iotType: '',
+        iotId: '',
+      },
+      IOTOpen: false,
+      typeOptions: [], // 设备类型下拉
+      codeOptions: [], // 设备编号下拉
+      rules: {
+        iotType: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
+        iotId: [{ required: true, message: '请选择设备编号', trigger: 'change' }],
+      },
+    }
+  },
+  created() {
+    console.log('🚀 ~ created ~ BindIOT', this.props)
+    this.getList()
+  },
+  methods: {
+    // 查询
+    handleQuery() {
+      console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.keyWord)
+      this.getList()
+    },
+    // 获取列表
+    async getList() {
+      try {
+        const params = {
+          maCode: this.props.maCode,
+          ...this.queryForm,
+          ...this.queryParams,
+        }
+        console.log('🚀 ~ getList ~ 获取列表', params)
+
+        const res = await getTypeList(params)
+        this.tableData = res.rows
+        this.total = res.total
+      } catch (err) {
+        console.log('🚀 ~ getList ~ err:', err)
+      }
+    },
+    // 返回
+    goBack() {
+      this.$tab.refreshPage()
+    },
+    // 绑定新设备
+    bindNewIOT() {
+      console.log('🚀 ~ bindNewIOT ~ 绑定新设备')
+      this.IOTOpen = true
+      this.getIotType()
+      this.$nextTick(() => {
+        this.$refs.IOTForm.resetFields()
+      })
+    },
+    // 解绑
+    handleUnbind(row) {
+      console.log('🚀 ~ handleUnbind ~ 解绑', row)
+      try {
+        const params = {
+          maCode: this.props.maCode,
+          typeId: this.props.typeId,
+          id: row.id,
+          iotId: row.iotId,
+        }
+        this.$confirm('确定解绑设备吗?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+          .then(async () => {
+            await unbindIot(params)
+            this.$message.success('解绑成功')
+            this.getList()
+          })
+          .catch(() => {
+            this.$message.info('已取消解绑')
+          })
+      } catch (err) {
+        console.log('🚀 ~ handleUnbind ~ err:', err)
+      }
+    },
+    // 提交
+    submit() {
+      try {
+        // 校验
+        this.$refs.IOTForm.validate(async valid => {
+          if (valid) {
+            this.loading = true
+            const params = {
+              iotTypeId: this.IOTForm.iotType,
+              iotId: this.IOTForm.iotId,
+              maCode: this.props.maCode,
+              typeId: this.props.typeId,
+            }
+            console.log('🚀 ~ submit ~ 提交绑定设备', params, this.props)
+            await bindIot(params)
+            this.$message.success('绑定成功')
+            this.IOTOpen = false
+            this.loading = false
+            this.getList()
+          } else {
+            return false
+          }
+        })
+      } catch (err) {
+        console.log('🚀 ~ submit ~ err:', err)
+        this.loading = false
+      }
+    },
+    // 获取下拉
+    async getIotType() {
+      try {
+        const res = await selectList()
+        this.typeOptions = res.data
+      } catch (err) {
+        console.log('🚀 ~ getIotType ~ err:', err)
+      }
+    },
+    // 设备类型改变
+    async changeIotType(iotTypeId) {
+      try {
+        this.codeOptions = []
+        this.IOTForm.iotId = ''
+        if (!iotTypeId) return
+        const params = {
+          iotTypeId,
+        }
+        // 获取设备编号
+        const res = await selectList(params)
+        this.codeOptions = res.data
+      } catch (err) {
+        console.log('🚀 ~ changeIotType ~ err:', err)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.maCode {
+  margin-top: 15px;
+  font-size: 18px;
+}
+</style>
diff --git a/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
new file mode 100644
index 00000000..ee27f634
--- /dev/null
+++ b/sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue
@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <!-- 地图弹框 展示设备轨迹 -->
+    <el-dialog title="装备定位信息" :visible.sync="openMap" width="80%" :close-on-click-modal="false" @close="close">
+      <!-- 表单 根据日期查询设备轨迹 -->
+      <el-card shadow="hover">
+        <el-form :model="queryForm" inline>
+          <el-form-item label="查询日期">
+            <el-date-picker
+              v-model="queryForm.date"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="请选择开始日期"
+              end-placeholder="请选择结束日期"
+              style="width: 330px"
+              value-format="yyyy-MM-dd"
+              format="yyyy-MM-dd"
+            ></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" size="small" @click="handleQuery">轨迹查询</el-button>
+          </el-form-item>
+        </el-form>
+        <div>
+          <h2>{{ equipment }}</h2>
+          <div class="equipment">定位设备编号: {{ equipmentNumber }}</div>
+          <div class="equipment">{{ engineering }}工程</div>
+        </div>
+
+        <!-- 地图 -->
+        <div v-if="openMap" id="container" style="height: 500px; background-color: #bfc; margin-top: 13px"></div>
+      </el-card>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MapDialog',
+  data() {
+    return {
+      openMap: false, // 是否打开地图弹框
+      queryForm: {
+        date: '',
+      },
+      equipment: '', // 设备名称
+      equipmentNumber: 'H906L', // 设备编号
+      engineering: '大禹治水', // 工程
+      map: null,
+      // 轨迹点
+      linePointList: [
+        {
+          lng: 116.297611,
+          lat: 40.047363,
+        },
+        {
+          lng: 116.302839,
+          lat: 40.048219,
+        },
+        {
+          lng: 116.308301,
+          lat: 40.050566,
+        },
+        {
+          lng: 116.305732,
+          lat: 40.054957,
+        },
+        {
+          lng: 116.304754,
+          lat: 40.057953,
+        },
+        {
+          lng: 116.306487,
+          lat: 40.058312,
+        },
+        {
+          lng: 116.307223,
+          lat: 40.056379,
+        },
+      ],
+    }
+  },
+  mounted() {
+    this.getEquipmentInfo()
+  },
+  methods: {
+    async handleQuery() {
+      console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.date)
+      const params = {
+        date: this.queryForm.date,
+      }
+      this.getEquipmentInfo(params)
+      // 先销毁地图 再重新初始化
+      this.map.clearOverlays()
+      this.map = null
+      await this.initMap()
+    },
+    openMapDialog(val) {
+      this.openMap = val
+      this.initMap()
+    },
+    close() {
+      this.openMap = false
+      this.$emit('getList')
+    },
+    // 获取装备信息
+    getEquipmentInfo(params = {}) {
+      console.log('🚀 ~ getEquipmentInfo ~ 获取装备信息', params)
+      // 接口(params).then(res => {
+      //   this.equipment = res.equipment
+      //   this.equipmentNumber = res.equipmentNumber
+      //   this.engineering = res.engineering
+      //   this.linePointList = res.linePointList
+      // })
+    },
+    // 初始化地图和轨迹
+    initMap() {
+      this.$nextTick(() => {
+        this.map = new BMapGL.Map('container') // 创建地图实例
+        let point = new BMapGL.Point(117.14, 31.87) // 创建点坐标
+        console.log('🚀 ~ this.$nextTick ~ point:', point)
+        this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
+        this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
+
+        // 添加轨迹
+        let pointList = []
+        if (this.linePointList.length === 0) return
+        for (var i = 0; i < this.linePointList.length; i++) {
+          pointList.push(new BMapGL.Point(this.linePointList[i].lng, this.linePointList[i].lat))
+        }
+        let polyline = new BMapGL.Polyline(pointList)
+        // 修改线的样式
+        polyline.setStrokeColor('#EA3323') // 线颜色  #EA3323
+        // polyline.setStrokeWeight(2) // 线宽
+
+        let trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
+          overallView: true, // 动画完成后自动调整视野到总览
+          tilt: 30, // 轨迹播放的角度，默认为55
+          duration: 5000, // 动画持续时长，默认为10000，单位ms
+          delay: 2000, // 动画开始的延迟，默认0，单位ms
+        })
+
+        trackAni.start()
+        // 设置起点终点图标
+        this.triggerMovement()
+      })
+    },
+    // 添加起点和终点的标记
+    addStartEndMarkers(startLatLng, endLatLng) {
+      let startIcon = new BMapGL.Icon(require('/src/assets/images/startIcon.png'), new BMapGL.Size(32, 32))
+      let startMarker = new BMapGL.Marker(startLatLng, { icon: startIcon })
+      this.map.addOverlay(startMarker)
+
+      let endIcon = new BMapGL.Icon(require('/src/assets/images/endIcon.png'), new BMapGL.Size(32, 32))
+      let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
+      this.map.addOverlay(endMarker)
+    },
+    // 轨迹运动结束后的回调
+    triggerMovement() {
+      // 轨迹运动结束后获取起点和终点的经纬度坐标
+      let startLatLng = new BMapGL.Point(this.linePointList[0].lng, this.linePointList[0].lat)
+      let endLatLng = new BMapGL.Point(
+        this.linePointList[this.linePointList.length - 1].lng,
+        this.linePointList[this.linePointList.length - 1].lat
+      )
+
+      // 添加起点和终点的图标
+      this.addStartEndMarkers(startLatLng, endLatLng)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.equipment {
+  font-weight: 600;
+  font-size: 15px;
+  margin-top: 10px;
+}
+</style>
diff --git a/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue b/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
index 7a96c60b..e74b29b6 100644
--- a/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
+++ b/sgzb-ui/src/views/warehouseManage/machinery/coding/index.vue
@@ -44,7 +44,7 @@
                     clearable
                     filterable
                     style="width: 240px"
-                    :disabled="!queryParams.itemId" 
+                    :disabled="!queryParams.itemId"
                     @change="selectDevice"
                 >
                     <el-option