New file |
| | |
| | | export interface Devices { |
| | | systemDeviceID: string |
| | | currentDeviceID: string |
| | | systemDeviceStatus: number |
| | | clusterStatus: string |
| | | clusterNodeQuantity: number |
| | | systemDeviceRunSince: number |
| | | deviceIDList: string[] |
| | | } |
| | |
| | | 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 |
| | |
| | | data: params |
| | | }) |
| | | } |
| | | |
| | | /** |
| | | * 获取当前面板绑定的设备列表 |
| | | */ |
| | | export function getDeviceList() { |
| | | return request<BaseResponse<Devices>>({ |
| | | url: `/v1/device/list`, |
| | | method: 'get' |
| | | }) |
| | | } |
| | |
| | | |
| | | 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'] |
New file |
| | |
| | | <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> |
New file |
| | |
| | | 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 } |
| | | }) |
New file |
| | |
| | | <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> |
| | |
| | | <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="加工信息"> |
| | |
| | | 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' |