feat: 问题诊断弹窗;头图

songshankun

2023-11-02 4afebf6007a5729cde359d08ab1918182bb2ed21

feat: 问题诊断弹窗;头图

 public/header-bg.png

 src/common/constants/index.ts

@@ -16,3 +16,8 @@
  6: 'F',
  7: 'G'
}

export const DEVICE_STATUS_NAME_MAP = {
  1: '正常',
  2: '异常'
}

 src/components/BaseModal.vue

@@ -36,11 +36,12 @@
})
const emit = defineEmits<{
  'update:modelValue': [show: boolean]
  close: []
}>()

const modelData = useVModel(props, 'modelValue', emit)
function closeModal() {
  modelData.value = false
  emit('close')
}
</script>
<style scoped lang="scss">

 src/components/DashboardLayout.vue

@@ -72,6 +72,9 @@
// 下边高度
$bottomBlockHeight: calc(100vh - 2 * $layoutPadding - $headerBlockHeight - $topBlocHeight);
.dashboard-layout {
  background-image: url('/header-bg.png');
  background-position-x: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: space-between;

 src/views/dashboard/components/DashboardTitle.vue

@@ -1,6 +1,6 @@
<template>
  <div class="dashboard-title">
    <div class="title-text">智能工作台 — {{ props?.deviceInfo?.currentDeviceID ?? '' }}</div>
    <div class="title-text">智能工作台 — {{ deviceStore?.devices?.currentDeviceID ?? '' }}</div>
    <div class="title-status">
      <div class="connection-info" @click="openSelectDeviceModal">
        <el-icon size="30" color="red">
@@ -10,14 +10,17 @@
      <div class="connection-status"></div>
    </div>
  </div>

  <TroubleTrackerModal v-model="showModal"></TroubleTrackerModal>
</template>
<script setup lang="ts">
import type { Devices } from '@/api/device'
import AlertLightIcon from '@/components/icons/AlertLightIcon.vue'
import { ref } from 'vue'
import { useDevicesStore } from '@/stores/devices'
import TroubleTrackerModal from '@/views/dashboard/components/TroubleTrackerModal.vue'

export interface DashBoardTitleProps {
  deviceInfo: Devices
  // deviceInfo: Devices
}

const props = defineProps<DashBoardTitleProps>()
@@ -27,6 +30,10 @@
function openSelectDeviceModal() {
  showModal.value = true
}

const deviceStore = useDevicesStore()

deviceStore.getDevicesInfo()
</script>

<style scoped lang="scss">

 src/views/dashboard/components/TroubleTrackerModal.vue

New file
@@ -0,0 +1,95 @@
<template>
  <div class="trouble-tracker-modal">
    <BaseModal v-model="modelData" :wider="true" @close="closeModal">
      <template #title>问题诊断 </template>
      <div class="modal-content">
        <el-scrollbar always class="scroller">
          <div v-if="fakeTroubles?.length" class="trouble">
            <div v-for="(item, index) in fakeTroubles" :key="index" class="trouble-item">
              <div class="trouble-content">
                <div class="trouble-icon">
                  <el-icon v-if="item.status === 2" size="30" color="#ff0000"><WarnTriangleFilled /></el-icon>
                  <el-icon v-if="item.status === 1" size="30" color="#00ff00"><CircleCheckFilled /></el-icon>
                </div>
                <div class="trouble-text">{{ item.content }}</div>
              </div>
              <div class="trouble-status" :class="{ green: item.status === 1, red: item.status === 2 }">
                {{ DEVICE_STATUS_NAME_MAP[item.status] }}
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </BaseModal>
  </div>
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core/index'
import { ref } from 'vue'
import { CircleCheckFilled, WarnTriangleFilled } from '@element-plus/icons-vue'
import { DEVICE_STATUS_NAME_MAP } from '@/common/constants'
export interface TroubleTrackerModalProps {
  modelValue: false
}
const props = withDefaults(defineProps<TroubleTrackerModalProps>(), {
  modelValue: false
})
const emit = defineEmits<{
  'update:modelValue': [show: boolean]
}>()
const modelData = useVModel(props, 'modelValue', emit)

function closeModal() {
  modelData.value = false
}

const fakeTroubles = ref<{ content: string; status: 1 | 2 }[]>([{ content: '云端网络连接', status: 1 }])
// TODO: 等接口
fakeTroubles.value.push(
  ...Array(100)
    .fill(0)
    .map(() => {
      return {
        content: '云端网络连接',
        status: Math.ceil(Math.random() + 1)
      } as { content: string; status: 1 | 2 }
    })
)
</script>
<style scoped lang="scss">
.modal-content {
  height: 600px;
}
.trouble {
  color: #fff;
  font-size: 18px;
  padding: 6px 40px 6px 20px;

  &-item {
    min-height: 40px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &-icon {
    height: 30px;
    margin-right: 14px;
  }
  &-content {
    display: flex;
    align-items: center;
  }
  &-status {
    &.green {
      color: #00ff00;
    }
    &.red {
      color: #ff0000;
    }
  }
}
.scroller {
  padding: 4px 16px;
}
</style>