songshankun
2023-11-01 2b6951892777086c274d0d06a48c4c525173aa62
feat:添加警灯svg图标组件;添加标题组件
4个文件已添加
3个文件已修改
136 ■■■■■ 已修改文件
src/api/device.ts 9 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/index.ts 11 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components.d.ts 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/components/icons/AlertLightIcon.vue 36 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/stores/devices.ts 23 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/dashboard/components/DashboardTitle.vue 51 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/dashboard/index.vue 5 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/device.ts
New file
@@ -0,0 +1,9 @@
export interface Devices {
  systemDeviceID: string
  currentDeviceID: string
  systemDeviceStatus: number
  clusterStatus: string
  clusterNodeQuantity: number
  systemDeviceRunSince: number
  deviceIDList: string[]
}
src/api/index.ts
@@ -1,6 +1,7 @@
import { request } from '@/common/utils'
import type { CraftParamsResponse, TasksGroupByChannel } from './task'
import type { PLCResponse } from './plc'
import type { Devices } from './device'
export interface BaseResponse<T = any> {
  code: number
@@ -94,3 +95,13 @@
    data: params
  })
}
/**
 * 获取当前面板绑定的设备列表
 */
export function getDeviceList() {
  return request<BaseResponse<Devices>>({
    url: `/v1/device/list`,
    method: 'get'
  })
}
src/components.d.ts
@@ -7,6 +7,7 @@
declare module 'vue' {
  export interface GlobalComponents {
    AlertLightIcon: typeof import('./components/icons/AlertLightIcon.vue')['default']
    BaseModal: typeof import('./components/BaseModal.vue')['default']
    DashboardLayout: typeof import('./components/DashboardLayout.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
src/components/icons/AlertLightIcon.vue
New file
@@ -0,0 +1,36 @@
<script setup lang="ts"></script>
<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="200px"
    height="200px"
    viewBox="0 0 200 200"
    style="
      shape-rendering: geometricPrecision;
      text-rendering: geometricPrecision;
      image-rendering: optimizeQuality;
      fill-rule: evenodd;
      clip-rule: evenodd;
    "
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <g>
      <path
        style="opacity: 0.988"
        fill="#d71d05"
        d="M 87.5,-0.5 C 95.1667,-0.5 102.833,-0.5 110.5,-0.5C 146.888,7.72465 167.388,30.3913 172,67.5C 172.5,101.165 172.667,134.832 172.5,168.5C 123.833,168.5 75.1667,168.5 26.5,168.5C 26.3333,132.498 26.5,96.4985 27,60.5C 33.9986,27.0017 54.1653,6.66837 87.5,-0.5 Z M 101.5,40.5 C 103.678,52.6006 105.011,64.9339 105.5,77.5C 116.858,77.4139 128.191,77.9139 139.5,79C 123.945,100.223 108.778,121.723 94,143.5C 93.167,128.176 92.667,112.842 92.5,97.5C 80.4954,97.6665 68.4954,97.4999 56.5,97C 71.8692,78.4097 86.8692,59.5764 101.5,40.5 Z"
      />
    </g>
    <g>
      <path
        style="opacity: 0.995"
        fill="#d81d05"
        d="M 199.5,183.5 C 199.5,186.833 199.5,190.167 199.5,193.5C 197.167,195.167 195.167,197.167 193.5,199.5C 130.833,199.5 68.1667,199.5 5.5,199.5C 3.83333,197.167 1.83333,195.167 -0.5,193.5C -0.5,190.167 -0.5,186.833 -0.5,183.5C 1.67098,181.5 4.00432,179.666 6.5,178C 68.5,177.333 130.5,177.333 192.5,178C 194.996,179.666 197.329,181.5 199.5,183.5 Z"
      />
    </g>
  </svg>
</template>
<style scoped lang="scss"></style>
src/stores/devices.ts
New file
@@ -0,0 +1,23 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import type { Devices } from '@/api/device'
import { getDeviceList } from '@/api'
export const useDevicesStore = defineStore('counter', () => {
  const devices = ref<Devices>()
  const deviceIDList = computed(() => devices?.value?.deviceIDList ?? [])
  function getDevicesInfo() {
    getDeviceList().then(
      (res) => {
        devices.value = res?.data
      },
      (err) => {
        console.error(err)
        devices.value = undefined
      }
    )
  }
  return { devices, deviceIDList, getDevicesInfo }
})
src/views/dashboard/components/DashboardTitle.vue
New file
@@ -0,0 +1,51 @@
<template>
  <div class="dashboard-title">
    <div class="title-text">智能工作台 — {{ props?.deviceInfo?.currentDeviceID ?? '' }}</div>
    <div class="title-status">
      <div class="connection-info" @click="openSelectDeviceModal">
        <el-icon size="30" color="red">
          <AlertLightIcon></AlertLightIcon>
        </el-icon>
      </div>
      <div class="connection-status"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { Devices } from '@/api/device'
import AlertLightIcon from '@/components/icons/AlertLightIcon.vue'
import { ref } from 'vue'
export interface DashBoardTitleProps {
  deviceInfo: Devices
}
const props = defineProps<DashBoardTitleProps>()
const showModal = ref(false)
function openSelectDeviceModal() {
  showModal.value = true
}
</script>
<style scoped lang="scss">
.dashboard-title {
  position: relative;
}
.title-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
}
.title-status {
  position: absolute;
  top: 16px;
  right: 40px;
}
.connection-info {
  cursor: pointer;
}
</style>
src/views/dashboard/index.vue
@@ -6,7 +6,9 @@
    <template #leftBlock2>
      <ChannelCollapse :channels="channels"></ChannelCollapse>
    </template>
    <template #middleBlock1>标题</template>
    <template #middleBlock1>
      <DashboardTitle></DashboardTitle>
    </template>
    <template #middleBlock2>
      <el-tabs v-model="activeMainTabName" class="main-info-tabs">
        <el-tab-pane label="加工信息" name="加工信息">
@@ -61,6 +63,7 @@
import ProcessingInfo from '@/views/dashboard/components/ProcessingInfo.vue'
import TaskControl from '@/views/dashboard/components/TaskControl.vue'
import SubTitle from '@/views/dashboard/components/SubTitle.vue'
import DashboardTitle from '@/views/dashboard/components/DashboardTitle.vue'
defineOptions({
  name: 'DashboardView'