guoshilong
2023-09-11 11433d0f47eae3403e883fc26d72269b930235f2
src/pages/page-web/projects/tsa.vue
@@ -15,7 +15,7 @@
            <a-empty style="color: #fff;" :image="simpleImage" description="暂无数据" :image-style="{ height: '60px' }" />
          </div>
          <div v-else class="fz12" style="color: white;">
            <div v-for="dock in onlineDocks.data" :key="dock.sn" style="background: #3c3c3c; height: 90px; width: 250px; margin-bottom: 10px;">
            <div v-for="dock in onlineDocks.data" :key="dock.sn" style="background: #3c3c3c; height: 90px; margin-bottom: 10px;">
              <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;">
@@ -26,6 +26,7 @@
                  <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>
                      132
                      <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] ? EDockModeCode[dockInfo[dock.gateway.sn].basic_osd?.mode_code] : EDockModeCode[EDockModeCode.Disconnected] }}
                      </div>
@@ -142,7 +143,7 @@
            <a-empty :image="simpleImage" style="color: #fff;"  description="暂无数据" :image-style="{ height: '60px' }" />
          </div>
          <div v-else class="fz12" style="color: white;">
            <div v-for="device in onlineDevices.data" :key="device.sn" style="background: #3c3c3c; height: 90px; width: 250px; margin-bottom: 10px;">
            <div v-for="device in onlineDevices.data" :key="device.sn" style="background: #3c3c3c; height: 90px; margin-bottom: 10px;">
              <div class="battery-slide" v-if="deviceInfo[device.sn]">
                <div style="background: #535759; width: 100%;"></div>
                <div class="capacity-percent" :style="{ width: deviceInfo[device.sn].battery.capacity_percent + '%'}"></div>
@@ -186,12 +187,17 @@
        </a-collapse-panel>
      </a-collapse>
    </div>
    <Drawer title="项目设置" :styleDrawer="styleDrawer" v-model:show="showDrawer">
      <DockConfig />
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
import { styleDrawer } from './common/common'
import { computed, onMounted, reactive, ref, watch, WritableComputedRef } from 'vue'
import { EDeviceTypeName, ELocalStorageKey } from '/@/types'
import Drawer from '/@/components/Drawer/Drawer.vue'
import noData from '/@/assets/icons/no-data.png'
import { Empty } from 'ant-design-vue'
import rc from '/@/assets/icons/rc.png'
@@ -200,6 +206,10 @@
import { getDeviceTopo, getUnreadDeviceHms, updateDeviceHms } from '/@/api/manage'
import { RocketOutlined, EyeInvisibleOutlined, EyeOutlined, RobotOutlined, DoubleRightOutlined } from '@ant-design/icons-vue'
import { EHmsLevel } from '/@/types/enums'
import { UranusMqtt } from '/@/mqtt/index'
import DockConfig from './components/DockConfig.vue'
const { appContext } = getCurrentInstance()
const global = appContext.config.globalProperties
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
const store = useMyStore()
const username = ref(localStorage.getItem(ELocalStorageKey.Username))
@@ -207,7 +217,7 @@
const osdVisible = ref({} as OSDVisible)
const hmsVisible = new Map<string, boolean>()
const scorllHeight = ref()
const showDrawer = ref(false)
const onlineDevices = reactive({
  data: [] as OnlineDevice[]
})
@@ -220,8 +230,8 @@
      sn: '我是sn字段',
      mode: '我是mode字段',
      gateway: {
        model: '我是gateway.model字段',
        callsign: '我是gateway.callsign字段',
        model: 'gateway.model',
        callsign: 'gateway.callsign',
        sn: '我是gateway.sn字段',
        mode: '我是gateway.mode字段',
      },
@@ -249,6 +259,9 @@
})
onMounted(() => {
  console.log(global, 'global')
  // const mqtt = new UranusMqtt('ws://192.168.1.198:8083/mqtt', {})
  // mqtt.initMqtt()
  getOnlineTopo()
  setTimeout(() => {
    watch(() => store.state.deviceStatusEvent,
@@ -314,23 +327,24 @@
}
function switchVisible (e: any, device: OnlineDevice, isDock: boolean, isClick: boolean) {
  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)
  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)
}
function getUnreadHms (sn: string) {