无人机操作系统
blame | history | patch | commit | commitdiff | ignore whitespace
husq
2023-09-27 2c2bc8614c8ea0ce386369eb4924da1e6aa052d1 
 src/pages/page-web/projects/task.vue


@@ -19,23 +19,618 @@


        <a-col :span="1"></a-col>


      </a-row>


    </div>




    <div v-if="!taskRoute">


      <router-view/>


    </div>




    <div v-else>




      <div>


        <a-row style="padding: 15px 0">


          <a-col :span="1"></a-col>


          <a-col :span="14">


            当前设备


          </a-col>


          <a-col :span="8">


            <a-checkbox v-model:checked="onlineCheck" @change="onlineCheckBoxChange">


              <span style="color: #ffffff">全选({{ onlineCheckArr.data.length }}/{{ onlineDocks.data.length }})</span>


            </a-checkbox>


          </a-col>


          <a-col :span="1"></a-col>




        </a-row>




        <a-row>


          <a-col :span="1"></a-col>


          <a-col :span="22">




            <div v-if="onlineDocks.data.length === 0" style="height: 150px; color: white;">


              <a-empty style="color: #fff;" :image="simpleImage" description="暂无数据"


                       :image-style="{ height: '60px' }"/>


            </div>


            <div v-else class="fz12" style="color: white;">


              <div @click="selectOnlineDock(dock)" v-for="dock in onlineDocks.data" :key="dock.sn"


                   :style="{cursor:'pointer', background: '#3c3c3c', height: '130px', 'margin-bottom': '10px',border:dock.selected?'2px solid #2b85e4':''}">




                <div class="job-info">


                  <div class="job-status">


                    <FileTextOutlined /> 执行失败


                  </div>


                  <div class="job-name">


                    任务标题


                  </div>


                </div>




                <div style="border-radius: 2px; height: 60%; width: 100%;" class="flex-row flex-justify-between flex-align-center">


                  <div style="float: left; padding: 0px 5px 8px 8px; width: 88%">


                    <!-- // 机场设备标题 -->


                    <div style="width: 80%; height: 30px; line-height: 30px; font-size: 16px;">


                      <a-tooltip :title="`${dock.gateway.callsign} - ${dock.callsign ?? 'No Drone'}`">


                        <div class="text-hidden" style="max-width: 200px;">{{ dock.gateway.callsign }} - {{


                            dock.callsign ??


                            'No Drone'


                          }}


                        </div>


                      </a-tooltip>


                    </div>


                    <!-- // 机场设备状态 -->


                    <div class="mt5 flex-align-center flex-row flex-justify-between" style="background: #595959;">


                      <div class="flex-align-center flex-row">


                      <span class="ml5 mr5">


                        <RobotOutlined/>


                      </span>


                        <div class="font-bold text-hidden" style="max-width: 80px;"


                             :style="dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">


                          {{


                            dockInfo[dock.gateway.sn] ? EDockModeText[dockInfo[dock.gateway.sn].basic_osd?.mode_code] :


                                EDockModeText[EDockModeCode.Disconnected]


                          }}


                        </div>


                      </div>


                      <div class="mr5 flex-align-center flex-row" style="width: 85px; margin-right: 0; height: 18px;">


                        <div v-if="hmsInfo[dock.gateway.sn]" class="flex-align-center flex-row">


                          <div :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' :


                          hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"


                               style="width: 18px; height: 16px; text-align: center;">


                          <span :style="hmsInfo[dock.gateway.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{


                              hmsInfo[dock.gateway.sn].length


                            }}</span>


                            <span class="fz10">{{ hmsInfo[dock.gateway.sn].length > 99 ? '+' : '' }}</span>


                          </div>


                          <a-popover trigger="click" placement="bottom" color="black"


                                     v-model:visible="hmsVisible[dock.gateway.sn]"


                                     @visibleChange="readHms(hmsVisible[dock.gateway.sn], dock.gateway.sn)"


                                     :overlayStyle="{ width: '200px', height: '300px' }">


                            <div :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution' :


                            hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"


                                 style="margin-left: 3px; width: 62px; height: 16px;">


                              <span class="word-loop">{{ hmsInfo[dock.gateway.sn][0].message_zh }}</span>


                            </div>


                            <template #content>


                              <a-collapse style="background: black; height: 300px; overflow-y: auto;" :bordered="false"


                                          expand-icon-position="right" :accordion="true">


                                <a-collapse-panel v-for="hms in hmsInfo[dock.gateway.sn]" :key="hms.hms_id"


                                                  :showArrow="false"


                                                  style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px"


                                                  :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">


                                  <template #header="{ isActive }">


                                    <div class="flex-row flex-align-center" style="width: 130px;">


                                      <div style="width: 110px;">


                                        <span class="word-loop">{{ hms.message_zh }}</span>


                                      </div>


                                      <div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 "


                                           class="flex-row flex-align-center flex-justify-center"


                                           :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">


                                        <DoubleRightOutlined :rotate="isActive ? 90 : 0"/>


                                      </div>


                                    </div>


                                  </template>




                                  <a-tooltip :title="hms.create_time">


                                    <div style="color: white;" class="text-hidden">{{ hms.create_time }}</div>


                                  </a-tooltip>


                                </a-collapse-panel>


                              </a-collapse>


                            </template>


                          </a-popover>


                        </div>


                        <div v-else class="width-100" style="height: 90%; background: rgba(0, 0, 0, 0.35)"></div>


                      </div>


                    </div>


                    <!-- // 机场是否启动 -->


                    <div class="mt5 flex-align-center flex-row flex-justify-between" style="background: #595959;">


                      <div class="flex-row">


                      <span class="ml5 mr5">


                        <RocketOutlined/>


                      </span>


                        <div class="font-bold text-hidden" style="max-width: 80px"


                             :style="deviceInfo[dock.sn] && deviceInfo[dock.sn].mode_code !== EModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">


                          {{


                            deviceInfo[dock.sn] ? EModeText[deviceInfo[dock.sn].mode_code] :


                                EModeText[EModeCode.Disconnected]


                          }}


                        </div>


                      </div>


                      <div class="mr5 flex-align-center flex-row" style="width: 85px; margin-right: 0; height: 18px;">


                        <div v-if="hmsInfo[dock.sn]" class="flex-align-center flex-row">


                          <div :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' :


                          hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"


                               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 class="fz10">{{ hmsInfo[dock.sn].length > 99 ? '+' : '' }}</span>


                          </div>


                          <a-popover trigger="click" placement="bottom" color="black"


                                     v-model:visible="hmsVisible[dock.sn]"


                                     @visibleChange="readHms(hmsVisible[dock.sn], dock.sn)"


                                     :overlayStyle="{ width: '200px', height: '300px' }">


                            <div :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution' :


                            hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"


                                 style="margin-left: 3px; width: 62px; height: 16px;">


                              <span class="word-loop">{{ hmsInfo[dock.sn][0].message_zh }}</span>


                            </div>


                            <template #content>


                              <a-collapse style="background: black; height: 300px; overflow-y: auto;" :bordered="false"


                                          expand-icon-position="right" :accordion="true">


                                <a-collapse-panel v-for="hms in hmsInfo[dock.sn]" :key="hms.hms_id" :showArrow="false"


                                                  style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px"


                                                  :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">


                                  <template #header="{ isActive }">


                                    <div class="flex-row flex-align-center" style="width: 130px;">


                                      <div style="width: 110px;">


                                        <span class="word-loop">{{ hms.message_zh }}</span>


                                      </div>


                                      <div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 "


                                           class="flex-row flex-align-center flex-justify-center"


                                           :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">


                                        <DoubleRightOutlined :rotate="isActive ? 90 : 0"/>


                                      </div>


                                    </div>


                                  </template>




                                  <a-tooltip :title="hms.create_time">


                                    <div style="color: white;" class="text-hidden">{{ hms.create_time }}</div>


                                  </a-tooltip>


                                </a-collapse-panel>


                              </a-collapse>


                            </template>


                          </a-popover>


                        </div>


                        <div v-else class="width-100" style="height: 90%; background: rgba(0, 0, 0, 0.35)"></div>


                      </div>


                    </div>


                  </div>




                </div>


              </div>


            </div>


          </a-col>


        </a-row>




        <a-row style="padding: 15px 0">


          <a-col :span="1"></a-col>


          <a-col :span="14">


            历史设备


          </a-col>


          <a-col :span="8">


            <a-checkbox v-model:checked="historyCheck" @change="historyCheckBoxChange">


              <span style="color: #ffffff">全选({{ historyCheckArr.data.length }}/{{ historyDocks.data.length }})</span>


            </a-checkbox>


          </a-col>


          <a-col :span="1"></a-col>




        </a-row>




        <a-row>


          <a-col :span="1"></a-col>


          <a-col :span="22">




            <div v-if="historyDocks.data.length === 0" style="height: 150px; color: white;">


              <a-empty style="color: #fff;" :image="simpleImage" description="暂无数据"


                       :image-style="{ height: '60px' }"/>


            </div>


            <div v-else class="fz12" style="color: white;">


              <div @click="selectHistoryDock(dock)" v-for="dock in historyDocks.data" :key="dock.sn"


                   :style="{cursor:'pointer', background: '#3c3c3c', height: '90px', 'margin-bottom': '10px',border:dock.selected?'2px solid #2b85e4':''}">


                <div style="border-radius: 2px; height: 100%; width: 100%;"


                     class="flex-row flex-justify-between flex-align-center">


                  <div style="float: left; padding: 0px 5px 8px 8px; width: 88%">


                    <!-- // 机场设备标题 -->


                    <div style="width: 80%; height: 30px; line-height: 30px; font-size: 16px;">


                      <a-tooltip :title="`${dock.gateway.callsign} - ${dock.callsign ?? 'No Drone'}`">


                        <div class="text-hidden" style="max-width: 200px;">{{ dock.gateway.callsign }} - {{


                            dock.callsign ??


                            'No Drone'


                          }}


                        </div>


                      </a-tooltip>


                    </div>


                    <!-- // 机场设备状态 -->


                    <div class="mt5 flex-align-center flex-row flex-justify-between" style="background: #595959;">


                      <div class="flex-align-center flex-row">


                      <span class="ml5 mr5">


                        <RobotOutlined/>


                      </span>


                        <div class="font-bold text-hidden" style="max-width: 80px;"


                             :style="dockInfo[dock.gateway.sn] && dockInfo[dock.gateway.sn].basic_osd?.mode_code !== EDockModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">


                          {{


                            dockInfo[dock.gateway.sn] ? EDockModeText[dockInfo[dock.gateway.sn].basic_osd?.mode_code] :


                                EDockModeText[EDockModeCode.Disconnected]


                          }}


                        </div>


                      </div>


                      <div class="mr5 flex-align-center flex-row" style="width: 85px; margin-right: 0; height: 18px;">


                        <div v-if="hmsInfo[dock.gateway.sn]" class="flex-align-center flex-row">


                          <div :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' :


                          hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"


                               style="width: 18px; height: 16px; text-align: center;">


                          <span :style="hmsInfo[dock.gateway.sn].length > 99 ? 'font-size: 11px' : 'font-size: 12px'">{{


                              hmsInfo[dock.gateway.sn].length


                            }}</span>


                            <span class="fz10">{{ hmsInfo[dock.gateway.sn].length > 99 ? '+' : '' }}</span>


                          </div>


                          <a-popover trigger="click" placement="bottom" color="black"


                                     v-model:visible="hmsVisible[dock.gateway.sn]"


                                     @visibleChange="readHms(hmsVisible[dock.gateway.sn], dock.gateway.sn)"


                                     :overlayStyle="{ width: '200px', height: '300px' }">


                            <div :class="hmsInfo[dock.gateway.sn][0].level === EHmsLevel.CAUTION ? 'caution' :


                            hmsInfo[dock.gateway.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"


                                 style="margin-left: 3px; width: 62px; height: 16px;">


                              <span class="word-loop">{{ hmsInfo[dock.gateway.sn][0].message_zh }}</span>


                            </div>


                            <template #content>


                              <a-collapse style="background: black; height: 300px; overflow-y: auto;" :bordered="false"


                                          expand-icon-position="right" :accordion="true">


                                <a-collapse-panel v-for="hms in hmsInfo[dock.gateway.sn]" :key="hms.hms_id"


                                                  :showArrow="false"


                                                  style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px"


                                                  :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">


                                  <template #header="{ isActive }">


                                    <div class="flex-row flex-align-center" style="width: 130px;">


                                      <div style="width: 110px;">


                                        <span class="word-loop">{{ hms.message_zh }}</span>


                                      </div>


                                      <div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 "


                                           class="flex-row flex-align-center flex-justify-center"


                                           :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">


                                        <DoubleRightOutlined :rotate="isActive ? 90 : 0"/>


                                      </div>


                                    </div>


                                  </template>




                                  <a-tooltip :title="hms.create_time">


                                    <div style="color: white;" class="text-hidden">{{ hms.create_time }}</div>


                                  </a-tooltip>


                                </a-collapse-panel>


                              </a-collapse>


                            </template>


                          </a-popover>


                        </div>


                        <div v-else class="width-100" style="height: 90%; background: rgba(0, 0, 0, 0.35)"></div>


                      </div>


                    </div>


                    <!-- // 机场是否启动 -->


                    <div class="mt5 flex-align-center flex-row flex-justify-between" style="background: #595959;">


                      <div class="flex-row">


                      <span class="ml5 mr5">


                        <RocketOutlined/>


                      </span>


                        <div class="font-bold text-hidden" style="max-width: 80px"


                             :style="deviceInfo[dock.sn] && deviceInfo[dock.sn].mode_code !== EModeCode.Disconnected ? 'color: #00ee8b' : 'color: red;'">


                          {{


                            deviceInfo[dock.sn] ? EModeText[deviceInfo[dock.sn].mode_code] :


                                EModeText[EModeCode.Disconnected]


                          }}


                        </div>


                      </div>


                      <div class="mr5 flex-align-center flex-row" style="width: 85px; margin-right: 0; height: 18px;">


                        <div v-if="hmsInfo[dock.sn]" class="flex-align-center flex-row">


                          <div :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution-blink' :


                          hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn-blink' : 'notice-blink'"


                               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 class="fz10">{{ hmsInfo[dock.sn].length > 99 ? '+' : '' }}</span>


                          </div>


                          <a-popover trigger="click" placement="bottom" color="black"


                                     v-model:visible="hmsVisible[dock.sn]"


                                     @visibleChange="readHms(hmsVisible[dock.sn], dock.sn)"


                                     :overlayStyle="{ width: '200px', height: '300px' }">


                            <div :class="hmsInfo[dock.sn][0].level === EHmsLevel.CAUTION ? 'caution' :


                            hmsInfo[dock.sn][0].level === EHmsLevel.WARN ? 'warn' : 'notice'"


                                 style="margin-left: 3px; width: 62px; height: 16px;">


                              <span class="word-loop">{{ hmsInfo[dock.sn][0].message_en }}</span>


                            </div>


                            <template #content>


                              <a-collapse style="background: black; height: 300px; overflow-y: auto;" :bordered="false"


                                          expand-icon-position="right" :accordion="true">


                                <a-collapse-panel v-for="hms in hmsInfo[dock.sn]" :key="hms.hms_id" :showArrow="false"


                                                  style=" margin: 0 auto 3px auto; border: 0; width: 140px; border-radius: 3px"


                                                  :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">


                                  <template #header="{ isActive }">


                                    <div class="flex-row flex-align-center" style="width: 130px;">


                                      <div style="width: 110px;">


                                        <span class="word-loop">{{ hms.message_en }}</span>


                                      </div>


                                      <div style="width: 20px; height: 15px; font-size: 10px; z-index: 2 "


                                           class="flex-row flex-align-center flex-justify-center"


                                           :class="hms.level === EHmsLevel.CAUTION ? 'caution' : hms.level === EHmsLevel.WARN ? 'warn' : 'notice'">


                                        <DoubleRightOutlined :rotate="isActive ? 90 : 0"/>


                                      </div>


                                    </div>


                                  </template>




                                  <a-tooltip :title="hms.create_time">


                                    <div style="color: white;" class="text-hidden">{{ hms.create_time }}</div>


                                  </a-tooltip>


                                </a-collapse-panel>


                              </a-collapse>


                            </template>


                          </a-popover>


                        </div>


                        <div v-else class="width-100" style="height: 90%; background: rgba(0, 0, 0, 0.35)"></div>


                      </div>


                    </div>


                  </div>




                </div>


              </div>


            </div>


          </a-col>


        </a-row>




      </div>




    </div>


  </div>


</template>




<script lang="ts" setup>


import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue'


import { computed, ref } from 'vue'


import {


  PlusOutlined,


  MinusOutlined,


  RocketOutlined,


  EyeInvisibleOutlined,


  EyeOutlined,


  RobotOutlined,


  DoubleRightOutlined,


  FileTextOutlined,


} from '@ant-design/icons-vue'


import { useRoute } from 'vue-router'


import { ERouterName } from '/@/types/enums'


import { ERouterName, EHmsLevel } from '/@/types/enums'


import { computed, onMounted, reactive, ref, watch, WritableComputedRef } from 'vue'


import { EDeviceTypeName, ELocalStorageKey } from '/@/types'


import JessibucaVideo from '/@/components/Jessibuca/Jessibuca.vue'


import noData from '/@/assets/icons/no-data.png'


import rc from '/@/assets/icons/rc.png'


import { OnlineDevice, EModeCode, OSDVisible, EDockModeCode, DeviceOsd, EDockModeText, EModeText } from '/@/types/device'


import { useMyStore } from '/@/store'


import { getDeviceTopo, getUnreadDeviceHms, updateDeviceHms } from '/@/api/manage'




const route = useRoute()




const store = useMyStore()


const workspaceId = ref(localStorage.getItem(ELocalStorageKey.WorkspaceId)!)


const hmsVisible = new Map<string, boolean>()


const taskRoute = computed(() => {


  return route.name === ERouterName.TASK


})




const deviceInfo = computed(() => store.state.deviceState.deviceInfo)


const dockInfo = computed(() => store.state.deviceState.dockInfo)


const hmsInfo = computed({


  get: () => store.state.hmsInfo,


  set: (val) => {


    return val


  }


})


const scorllHeight = ref()


const onlineDocks = reactive({


  data: [] as OnlineDevice[]


})




const onlineCheckArr = reactive({


  data: [] as OnlineDevice[]


})




const onlineDevices = reactive({


  data: [] as OnlineDevice[]


})




const historyCheckArr = reactive({


  data: [] as OnlineDevice[]


})




const historyDocks = reactive({


  data: [] as OnlineDevice[]


})




const osdVisible = ref({} as OSDVisible)


const onlineCheck = ref(false)


const historyCheck = ref(false)




watch(


  () => onlineCheckArr.data,


  (newVal) => {


    const dockSns = newVal.map(item => item.gateway.sn).join(',')


    // 把机场编号存入store


    store.commit('SET_DOCK_SN', dockSns)


  },


  { deep: true }


)




onMounted(() => {


  getOnlineTopo()


  setTimeout(() => {


    watch(() => store.state.deviceStatusEvent,


      data => {


        getOnlineTopo()


        if (data.deviceOnline.sn) {


          getUnreadHms(data.deviceOnline.sn)


        }


      },


      {


        deep: true


      }


    )


    getOnlineDeviceHms()


  }, 3000)


  const element = document.getElementsByClassName('scrollbar').item(0) as HTMLDivElement


  const parent = element?.parentNode as HTMLDivElement


  scorllHeight.value = parent?.clientHeight - parent?.firstElementChild?.clientHeight


})




// 在线设备全选


function onlineCheckBoxChange (item: any) {


  onlineDocks.data.forEach(e => {


    e.selected = !e.selected


  })




  if (item.target.checked) {


    onlineCheckArr.data = onlineDocks.data


  } else {


    onlineCheckArr.data = []


  }


}




function historyCheckBoxChange (item: any) {


  historyDocks.data.forEach(e => {


    e.selected = !e.selected


  })




  historyCheckArr.data = historyDocks.data


}




// 在线机场点击


function selectOnlineDock (item: OnlineDevice) {


  // 当前已被选中，排除


  if (item.selected) {


    onlineCheckArr.data = onlineCheckArr.data.filter(e => e.sn !== item.sn)


  } else {


    // 当前未被选中，push


    onlineCheckArr.data.push(item)


  }


  item.selected = !item.selected


  if (onlineCheckArr.data.length === onlineDocks.data.length) {


    onlineCheck.value = true


  } else {


    onlineCheck.value = false


  }


}




function selectHistoryDock (item: OnlineDevice) {


  // 当前已被选中，排除


  if (item.selected) {


    historyCheckArr.data = historyCheckArr.data.filter(e => e.sn !== item.sn)


  } else {


    // 当前未被选中，push


    historyCheckArr.data.push(item)


  }


  item.selected = !item.selected


  if (historyCheckArr.data.length === historyDocks.data.length) {


    historyCheck.value = true


  }


}




// 监听ws 消息


// useConnectWebSocket(messageHandler)


function getOnlineTopo () {


  getDeviceTopo(workspaceId.value).then((res) => {


    if (res.code !== 0) {


      return


    }


    onlineDevices.data = []


    onlineDocks.data = []


    res.data.forEach((gateway: any) => {


      const child = gateway.children


      const device: OnlineDevice = {


        model: child?.device_name,


        callsign: child?.nickname,


        sn: child?.device_sn,


        mode: EModeCode.Disconnected,


        gateway: {


          model: gateway?.device_name,


          callsign: gateway?.nickname,


          sn: gateway?.device_sn,


          domain: gateway?.domain


        },


        payload: [],




        // 是否选中


        selected: false


      }


      child?.payloads_list.forEach((payload: any) => {


        device.payload.push({


          index: payload.index,


          model: payload.model,


          payload_name: payload.payload_name,


          payload_sn: payload.payload_sn,


          control_source: payload.control_source,


          payload_index: payload.payload_index


        })


      })


      if (EDeviceTypeName.Dock === gateway.domain) {


        hmsVisible.set(device.sn, false)


        hmsVisible.set(device.gateway.sn, false)


        onlineDocks.data.push(device)


      }


      if (gateway.status && EDeviceTypeName.Gateway === gateway.domain) {


        onlineDevices.data.push(device)


      }


    })


  })


}




function getUnreadHms (sn: string) {


  getUnreadDeviceHms(workspaceId.value, sn).then(res => {


    if (res.data.length !== 0) {


      hmsInfo.value[sn] = res.data


    }


  })


  console.info(hmsInfo.value)


}




function getOnlineDeviceHms () {


  const snList = Object.keys(dockInfo.value)


  if (snList.length === 0) {


    return


  }


  snList.forEach(sn => {


    getUnreadHms(sn)


  })


  const deviceSnList = Object.keys(deviceInfo.value)


  if (deviceSnList.length === 0) {


    return


  }


  deviceSnList.forEach(sn => {


    getUnreadHms(sn)


  })


}




function switchVisible (e: any, device: OnlineDevice, isDock: boolean, isClick: boolean, sn?: any) {


  // showDrawer.value = !showDrawer.value


  if (!isClick) {


    e.target.style.cursor = 'not-allowed'


    return


  }


  if (device.sn === osdVisible.value.sn) {


    osdVisible.value.visible = !osdVisible.value.visible


  } else {


    osdVisible.value.sn = device.sn


    osdVisible.value.callsign = device.callsign


    osdVisible.value.model = device.model


    osdVisible.value.visible = true


    osdVisible.value.gateway_sn = device.gateway.sn


    osdVisible.value.is_dock = isDock


    osdVisible.value.gateway_callsign = device.gateway.callsign


    osdVisible.value.payloads = device.payload


  }


  store.commit('SET_OSD_VISIBLE_INFO', osdVisible)


  store.commit('SET_HMSInfo_DetailSn', sn)


}




</script>




<style lang="scss">


@@ -43,4 +638,26 @@


  color: #fff;


  font-size: 16px;


}




.job-info{


  height: 30%;


  display: flex;


  align-items: center;


  border-bottom: 1px solid #c1c1c1;


  margin-bottom: 6px;




  .job-status{


    height: 100%;


    display: flex;


    align-items: center;


    background: red;


  }




  .job-name{


    height: 100%;


    display: flex;


    align-items: center;


    padding-left: 5px;


  }


}


</style>