在线设备优化

Web/src/api/custom/index.ts

@@ -77,7 +77,7 @@ export type FetchPilotPasswordApiParams = {
 
 // Api函数类型
 export type SignLoginApi = (data: SignLoginApiParams) => Promise<any>;
-export type FetchDeviceModelApi = () => Promise<any>;
+export type FetchDeviceModelApi = (params?: { flg: boolean }) => Promise<any>;
 export type FetchDeviceStatusApi = (params: { snList: string }) => Promise<any>;
 export type FetchPayloadListApi = () => Promise<any>;
 export type FetchFeedbackRecordListApi = (data: FetchFeedbackRecordListApiParams) => Promise<any>;
@@ -104,8 +104,8 @@ const signLoginApi: SignLoginApi = async (data) => {
 }
 
 // 获取设备型号
-const fetchDeviceModelApi: FetchDeviceModelApi = async () => {
-    const res = await request.get(`/manage/api/v1/devices/${getWorkspaceId()}/getDeviceType`);
+const fetchDeviceModelApi: FetchDeviceModelApi = async (params) => {
+    const res = await request.get(`/manage/api/v1/devices/${getWorkspaceId()}/getDeviceType`, { params: params });
     return res.data;
 };
 

Web/src/components/devices/changeRecord/components/Search.vue

@@ -2,27 +2,18 @@
   <a-row style="margin-bottom: 20px;" justify="end">
     <a-col>
       <a-form ref="formRef" layout="inline" :model="formModel" :colon="false">
-        <a-form-item name="date">
-          <a-range-picker style="width: 250px;" v-model:value="formModel.date" />
+        <a-form-item name="rangeDate">
+          <a-range-picker style="width: 250px;" v-model:value="formModel.rangeDate" />
         </a-form-item>
         <a-form-item name="device_name">
           <a-select style="width: 200px;" placeholder="请选择设备型号" v-model:value="formModel.device_name">
-            <a-select-option value="1">
-              Dock 2
-            </a-select-option>
-            <a-select-option value="2">
-              M30
-            </a-select-option>
-            <a-select-option value="3">
-              Mavice 3E
-            </a-select-option>
-            <a-select-option value="4">
-              DJI
+            <a-select-option v-for="item in state.deviceModelList" :value="item.value">
+              {{ item.label }}
             </a-select-option>
           </a-select>
         </a-form-item>
-        <a-form-item name="keyword">
-          <a-input style="width: 200px;" placeholder="项目名称、设备SN" v-model:value="formModel.keyword" />
+        <a-form-item name="search_info">
+          <a-input style="width: 200px;" placeholder="项目名称、设备SN" v-model:value="formModel.search_info" />
         </a-form-item>
         <a-form-item>
           <a-button style="margin-right: 10px;" @click="handleClicSekarch">
@@ -42,8 +33,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';
+import { apis } from '/@/api/custom';
+import moment from 'moment';
 
 interface Props {
   onClickSearch: (query: any) => Promise<any>,
@@ -57,22 +50,60 @@ const props = withDefaults(defineProps<Props>(), {
 const formRef = ref();
 
 const formModel = reactive({
-  date: [],
+  rangeDate: [],
   device_name: undefined,
-  keyword: '',
+  search_info: undefined,
+})
+
+interface State {
+  deviceModelList: {
+    value: string,
+    label: string,
+  }[],
+};
+
+const state: State = reactive({
+  deviceModelList: [],
+})
+
+onMounted(async () => {
+  try {
+    const res = await apis.fetchDeviceModel({ flg: true });
+    const list = res.data.map((item: any) => {
+      return {
+        value: item.device_name,
+        label: item.device_name,
+      }
+    })
+    state.deviceModelList = list;
+  } catch (e) {
+    console.error(e);
+  }
 })
 
 // 点击查询
 const handleClicSekarch = async () => {
   const values = formRef.value?.getFieldsValue();
-  await props.onClickSearch(values);
+  const data = {
+    ...values,
+  };
+  delete data.rangeDate;
+  if (values.rangeDate.length === 2) {
+    data.begin_time = moment(values.rangeDate[0]).valueOf();
+    data.end_time = moment(values.rangeDate[1]).valueOf();
+  }
+  await props.onClickSearch(data);
 }
 
 // 点击重置
 const handleClickReset = async () => {
   formRef.value?.resetFields();
   const values = formRef.value?.getFieldsValue();
-  await props.onClickReset(values);
+  const data = {
+    ...values,
+  };
+  delete data.rangeDate;
+  await props.onClickReset(data);
 }
 </script>
 

Web/src/components/onLineDevice/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content" @click="onClickLocation">
-    <div class="content-title">
+    <div class="content-title" v-if="type === 'AIRPORT'">
       <div class="content-title-left">
         <img class="content-title-left-icon" :src="taskSrc">
         <div>
@@ -27,7 +27,7 @@
             </div>
           </div>
           <div class="content-info-left-two-other">
-            原因
+            {{ deviceReason }}
           </div>
         </div>
         <div class="content-info-left-three">
@@ -74,6 +74,7 @@ import { wgs84togcj02 } from '/@/vendors/coordtransform'
 import { getRoot } from '/@/root';
 
 interface Props {
+  type: 'MANUAL' | 'AIRPORT',
   device: OnlineDevice,
   onClickLookInfo: () => void,
 };
@@ -82,12 +83,22 @@ const props = withDefaults(defineProps<Props>(), {
 
 });
 
-const root = getRoot()
+const root: any = getRoot()
 
 const store = useMyStore()
 
 const deviceInfo = computed(() => store.state.deviceState.deviceInfo)
 
+// 设备原因
+const deviceReason = computed(() => {
+  const device = store.state.deviceReason[props.device.sn];
+  if (device) {
+    return device.modeCodeReason;
+  } else {
+    return ''
+  }
+})
+
 // 电池容量
 const capacity = computed(() => {
   const device: any = deviceInfo.value[props.device.sn];
@@ -112,6 +123,8 @@ const onClickLocation = () => {
 .content {
   width: 208px;
   border: 1px solid #3d3d3d;
+  border-radius: 4px;
+  overflow: hidden;
   color: #FFFFFF;
   cursor: pointer;
 

Web/src/pages/page-web/projects/tsa.vue

@@ -96,7 +96,7 @@
                           style="width: 18px; height: 16px; text-align: center;">
                           <span :style="hmsInfo[dock.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{
                             hmsInfo[dock.sn].length
-                            }}</span>
+                          }}</span>
                           <span class="fz10">{{ hmsInfo[dock.sn].length > 99 ? '+' : '' }}</span>
                         </div>
                         <a-popover trigger="click" placement="bottom" color="black"
@@ -160,7 +160,7 @@
           <div v-else>
             <div :style="{ 'margin-top': index === 0 ? '' : '10px' }" v-for="(device, index) in onlineDevices.data"
               :key="device.sn">
-              <OnLineDevice :device="device"
+              <OnLineDevice type="MANUAL" :device="device"
                 :onClickLookInfo="() => switchVisible($event, device, false, deviceInfo[device.sn] && deviceInfo[device.sn].mode_code !== EModeCode.Disconnected)" />
             </div>
           </div>

Web/src/pages/page-web/projects/workspace.vue

@@ -32,10 +32,10 @@ const messageHandler = async (payload: any) => {
       store.commit('SET_REAL_TIME_TRAJECTORY', payload.data)
       break
     }
-    // case EBizCode.ControlSourceChange: {// 设备原因
-    //   console.log(payload,'payload');
-    //   break
-    // }
+    case EBizCode.ControlSourceChange: {// 设备原因
+      store.commit('SET_DEVICE_REASON', payload.data)
+      break
+    }
     case EBizCode.GatewayOsd: {
       store.commit('SET_GATEWAY_INFO', payload.data)
       break

Web/src/store/index.ts

@@ -13,6 +13,9 @@ const initStateFunc = () => ({
     sn: '',
     host: []
   },
+  deviceReason: {} as {
+    [sn: string]: any,
+  },
   mapClickElement: {
     id: '',
     type: '',
@@ -113,6 +116,9 @@ const mutations: MutationTree<RootStateType> = {
   SET_REAL_TIME_TRAJECTORY(state, info) {
     state.realTimeTrajectory = info
   },
+  SET_DEVICE_REASON(state, info) {
+    state.deviceReason[info.sn] = info
+  },
   SET_MAP_CLICK_ELEMENT(state, info) {
     state.mapClickElement = info
   },