定位页面优化

sgzb-ui/src/api/store/iotManagement.js

@@ -96,3 +96,11 @@ export const getIotDeviceLocationApi = (data) => {
 export const getIotDeviceTripApi = (data) => {
   return request.post('/material/iotMachine/searchItinerary', data)
 }
+/** 获取机具设备的停留点信息 */
+export const getIotDeviceParkDetailApi = (data) => {
+  return request.post('/material/iotMachine/reportParkDetailByTime', data)
+}
+/** 获取机具设备的报警信息 */
+export const getIotDeviceAlarmApi = (data) => {
+  return request.post('/material/iotMachine/reportAlarm', data)
+}

sgzb-ui/src/views/warehouseManage/machinery/coding/component/BindIOT.vue

@@ -1,257 +1,351 @@
 <template>
-  <div class="app-container" v-if="props.isShow">
+    <div class="app-container" v-if="props.isShow">
-    <PageHeader :pageContent="pageContent" @goBack="goBack" />
+        <PageHeader :pageContent="pageContent" @goBack="goBack" />
-    <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px" v-show="showSearch">
+        <el-form
-      <el-form-item label="关键字" prop="keyWord">
+            :model="queryForm"
-        <el-input v-model="queryForm.keyWord" clearable placeholder="请输入关键字" @keyup.enter.native="handleQuery" />
+            ref="queryForm"
-      </el-form-item>
+            size="small"
-      <el-form-item>
+            :inline="true"
-        <el-button type="primary" size="small" @click="handleQuery">搜索</el-button>
+            label-width="68px"
-        <el-button type="primary" size="small" @click="bindNewIOT">绑定新设备</el-button>
+            v-show="showSearch"
-      </el-form-item>
+        >
-    </el-form>
+            <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">
+        <el-row :gutter="10" class="mb8">
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+            <right-toolbar
-    </el-row>
+                :showSearch.sync="showSearch"
+                @queryTable="getList"
+            ></right-toolbar>
+        </el-row>
 
-    <el-table :data="tableData" style="width: 100%">
+        <el-table :data="tableData" style="width: 100%">
-      <el-table-column
+            <el-table-column
-        type="index"
+                type="index"
-        label="序号"
+                label="序号"
-        align="center"
+                align="center"
-        width="55"
+                width="55"
-        :index="indexContinuation(queryParams.pageNum, queryParams.pageSize)"
+                :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-table-column
-        </el-form-item>
+                label="设备类型"
-        <el-form-item label="设备编号" prop="iotId">
+                prop="iotTypeName"
-          <el-select v-model="IOTForm.iotId" filterable clearable placeholder="请选择" style="width: 280px">
+                align="center"
-            <el-option v-for="item in codeOptions" :key="item.iotId" :label="item.iotCode" :value="item.iotId" />
+            />
-          </el-select>
+            <el-table-column label="设备编号" prop="iotCode" align="center" />
-        </el-form-item>
+            <el-table-column label="设备状态" prop="iotStatus" align="center">
-      </el-form>
+                <!-- iotStatus 0 在线 1 掉线 -->
-      <div slot="footer" class="dialog-footer">
+                <template v-slot="{ row }">
-        <el-button @click="IOTOpen = false">取 消</el-button>
+                    <el-tag v-if="row.iotStatus == 0" type="success"
-        <el-button type="primary" @click="submit" :loading="loading">确 定</el-button>
+                        >在线</el-tag
-      </div>
+                    >
-    </el-dialog>
+                    <el-tag v-else type="danger">掉线</el-tag>
-  </div>
+                </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'
+import {
+    selectList,
+    bindIot,
+    getTypeList,
+    unbindIot,
+} from '@/api/store/iotManagement'
 
 export default {
-  name: 'BindIOT',
+    name: 'BindIOT',
-  props: {
     props: {
-      type: Object,
+        props: {
-      default: () => {},
+            type: Object,
+            default: () => {},
+        },
     },
-  },
+    components: {
-  components: {
+        PageHeader,
-    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()
     },
-    // 获取列表
+    data() {
-    async getList() {
+        return {
-      try {
+            loading: false,
-        const params = {
+            showSearch: true, // 是否显示搜索
-          maCode: this.props.maCode,
+            queryForm: {
-          ...this.queryForm,
+                keyWord: '',
-          ...this.queryParams,
+            },
-        }
+            total: 0,
-        console.log('🚀 ~ getList ~ 获取列表', params)
+            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',
+                    },
+                ],
+            },
 
-        const res = await getTypeList(params)
+            typeList: [],
-        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)
-      }
     },
-    // 提交
+    created() {
-    submit() {
+        console.log('🚀 ~ created ~ BindIOT', this.props)
-      try {
+        this.getList()
-        // 校验
+    },
-        this.$refs.IOTForm.validate(async valid => {
+    methods: {
-          if (valid) {
+        // 查询
-            this.loading = true
+        handleQuery() {
-            const params = {
+            console.log('🚀 ~ handleQuery ~ 查询:', this.queryForm.keyWord)
-              iotTypeId: this.IOTForm.iotType,
+            this.getList()
-              iotId: this.IOTForm.iotId,
+        },
-              maCode: this.props.maCode,
+        // 获取列表
-              typeId: this.props.typeId,
+        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
+                this.tableData.forEach((e) => {
+                    this.typeList.push(e.iotType)
+                })
+            } catch (err) {
+                console.log('🚀 ~ getList ~ err:', err)
             }
-            console.log('🚀 ~ submit ~ 提交绑定设备', params, this.props)
+        },
-            await bindIot(params)
+        // 返回
-            this.$message.success('绑定成功')
+        goBack() {
-            this.IOTOpen = false
+            this.$tab.refreshPage()
-            this.loading = false
+        },
-            this.getList()
+        // 绑定新设备
-          } else {
+        bindNewIOT() {
-            return false
+            console.log('🚀 ~ bindNewIOT ~ 绑定新设备')
-          }
+            this.IOTOpen = true
-        })
+            this.getIotType()
-      } catch (err) {
+            this.$nextTick(() => {
-        console.log('🚀 ~ submit ~ err:', err)
+                this.$refs.IOTForm.resetFields()
-        this.loading = false
+            })
-      }
+        },
+        // 解绑
+        handleUnbind(row) {
+            this.typeList = this.typeList.filter((e) => e != row.iotType)
+            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) {
+            const isType = this.typeList.some((e) => e == iotTypeId)
+            if (isType) {
+                this.$message.error(
+                    '当前机具已绑定改IOT类型设备，不可重复绑定！',
+                )
+                this.codeOptions = []
+                return
+            }
+            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)
+            }
+        },
     },
-    // 获取下拉
-    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;
+    margin-top: 15px;
-  font-size: 18px;
+    font-size: 18px;
 }
 </style>

sgzb-ui/src/views/warehouseManage/machinery/coding/component/MapDIalog.vue

@@ -18,7 +18,7 @@
                 </div>
                 <div class="equipment" v-if="false">{{ engineering }}工程</div>
                 <el-row :gutter="24">
-                    <el-col :span="8">
+                    <el-col :span="16">
                         <el-date-picker
                             v-model="queryForm.date"
                             type="datetimerange"
@@ -53,7 +53,7 @@
                                     class="right-info"
                                     :class="{ active: activeIndex === index }"
                                 >
-                                    <ul>
+                                    <!-- <ul>
                                         <li>{{ item.tripdistance }}KM</li>
                                         <li>{{ item.drivingDuration }}秒</li>
                                         <li>{{ item.maxspeed }}KM/h</li>
@@ -64,7 +64,7 @@
                                         <li>行驶时长</li>
                                         <li>最大速度</li>
                                         <li>平均速度</li>
-                                    </ul>
+                                    </ul> -->
 
                                     <div style="margin-top: 10px">
                                         <div class="time-container">
@@ -90,22 +90,38 @@
                             </div>
                         </el-tab-pane>
                         <el-tab-pane label="停留点">
-                            <div class="point-container">
+                            <div
+                                class="point-container"
+                                v-for="(item, index) in parkList"
+                                :key="index"
+                            >
                                 <div class="time-container">
-                                    <span class="radius-span">1</span>
+                                    <span class="radius-span">{{
-                                    <span>2024-07-18 01:18:53</span>
+                                        index + 1
-                                    <span>1时19分</span>
+                                    }}</span>
+                                    <span>{{ item.startTime }}</span>
+                                    <span
+                                        >{{ item.hours }}时{{
+                                            item.mints
+                                        }}分</span
+                                    >
                                 </div>
-                                <h3>安徽省------</h3>
+                                <h3>{{ item.address }}</h3>
                             </div>
                         </el-tab-pane>
                         <el-tab-pane label="报警">
-                            <div class="point-container">
+                            <div
+                                class="point-container"
+                                v-for="(item, index) in warningList"
+                                :key="index"
+                            >
                                 <div class="time-container">
-                                    <span class="radius-span">1</span>
+                                    <span class="radius-span">{{
-                                    <span>2024-07-18 01:18:53</span>
+                                        index + 1
+                                    }}</span>
+                                    <span>{{ item.warnTime }}</span>
                                 </div>
-                                <h3>手动触发紧急报警---------</h3>
+                                <h3>{{ item.startAlarm }}</h3>
                             </div>
                         </el-tab-pane>
                     </el-tabs>
@@ -127,6 +143,8 @@ import moment from 'moment'
 import {
     getIotDeviceLocationApi,
     getIotDeviceTripApi,
+    getIotDeviceParkDetailApi,
+    getIotDeviceAlarmApi,
 } from '@/api/store/iotManagement.js'
 export default {
     name: 'MapDialog',
@@ -189,6 +207,8 @@ export default {
             // 行程信息
             tripList: [],
             activeIndex: '',
+            // 停留点信息
+            parkList: [],
         }
     },
     created() {
@@ -237,8 +257,44 @@ export default {
             const res = await getIotDeviceTripApi({ ...this.tripParams })
             console.log(res, '行程信息--')
 
+            const resS = await getIotDeviceParkDetailApi({ ...this.tripParams })
+
+            console.log(resS, '停留点信息--')
+
+            const params = { ...this.tripParams }
+            params.beginTime = params.beginTime.slice(0, 10)
+            params.endTime = params.endTime.slice(0, 10)
+            const resSs = await getIotDeviceAlarmApi(params)
+
+            this.warningList = resSs.data
+            this.warningList.forEach((e) => {
+                e.warnTime = moment(parseInt(e.startAlarmTime)).format(
+                    'YYYY-MM-DD HH:mm:ss',
+                )
+            })
+            console.log(resSs, '报警信息--')
+
+            this.parkList = resS.data
+            this.parkList.forEach((e) => {
+                e.startTime = moment(parseInt(e.beginTime)).format(
+                    'YYYY-MM-DD HH:mm:ss',
+                )
+
+                e.hours = parseInt(
+                    (parseInt(e.endTime) - parseInt(e.beginTime)) /
+                        1000 /
+                        60 /
+                        60,
+                )
+                e.mints = parseInt(
+                    ((parseInt(e.endTime) - parseInt(e.beginTime)) /
+                        1000 /
+                        60) %
+                        60,
+                )
+            })
             let tripInfo = JSON.parse(res.msg)
-            console.log(tripInfo, '反序列化之后')
+            console.log(tripInfo, '反序列化之后', this.parkList)
 
             let addressList = []
             if (tripInfo.addressmap) {
@@ -246,7 +302,9 @@ export default {
             }
 
             tripInfo.totaltrips.forEach((e) => {
-                e.startTime = moment(e.startTime).format('YYYY-MM-DD HH:mm:ss')
+                e.startTime = moment(e.trackstarttime).format(
+                    'YYYY-MM-DD HH:mm:ss',
+                )
                 e.endTime = moment(e.trackendtime).format('YYYY-MM-DD HH:mm:ss')
 
                 e.drivingDuration = parseInt(