feat: 进度条背景色,对接设备切换组件接口数据

songshankun

2023-11-03 35b1ce8f65b78fcdfdd56481b29ed8d74a8a6621

feat: 进度条背景色,对接设备切换组件接口数据

 src/api/index.ts

@@ -108,6 +108,21 @@
  })
}

export interface SetCurrentDeviceParams {
  currentDeviceID: string
}

/**
 * 获取当前面板绑定的设备列表
 */
export function apiSetCurrentDevice(data: SetCurrentDeviceParams) {
  return request<BaseResponse<Devices>>({
    url: `/v1/device/setCurrentDeviceId`,
    method: 'post',
    data
  })
}

export interface CraftModelListParams {
  procedureId: number
  page: number

 src/components.d.ts

@@ -10,7 +10,6 @@
    AlertLightIcon: typeof import('./components/icons/AlertLightIcon.vue')['default']
    BaseModal: typeof import('./components/BaseModal.vue')['default']
    CommonModal: typeof import('./components/CommonModal.vue')['default']
    copy: typeof import('./components/BaseModal copy.vue')['default']
    DashboardLayout: typeof import('./components/DashboardLayout.vue')['default']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElCollapse: typeof import('element-plus/es')['ElCollapse']

 src/components/CommonModal.vue

@@ -28,7 +28,7 @@
  /** 是否展示模态框 */
  modelValue: boolean
  /** 更宽版本 */
  wider: boolean
  wider?: boolean
}
const props = withDefaults(defineProps<BaseModalProps>(), {
  modelValue: false,

 src/stores/devices.ts

@@ -1,9 +1,11 @@
import { computed, onUnmounted } from 'vue'
import { computed, onUnmounted, ref } from 'vue'
import { defineStore } from 'pinia'
import { getDeviceList } from '@/api'
import { apiSetCurrentDevice, getDeviceList } from '@/api'
import type { SetCurrentDeviceParams } from '@/api'
import { useRequest } from 'vue-hooks-plus'
import type { Devices } from '@/api/device'
import { DEVICE_INFO_POLLING_DURATION } from '@/common/constants'
import { ElMessage } from 'element-plus'

export const useDevicesStore = defineStore('device', () => {
  const deviceInfo = computed(() => {
@@ -27,10 +29,6 @@
    cancelDevicePolling()
    startDevicePolling()
  }

  onUnmounted(() => {
    cancelDevicePolling()
  })

  return { deviceInfo, startPollingDevice }
})

 src/stores/tasks.ts

@@ -77,10 +77,14 @@
  /**
   * 刷新所有数据
   */
  function reload(channel: number) {
  function reloadChannel(channel: number) {
    getChannels(currentType.value).then(() => {
      autoSelectTask(channel)
    })
  }

  function reloadAllData() {
    getChannels(currentType.value)
  }

  function moreChannelTasksBtn(channelNumber: number) {
@@ -128,9 +132,10 @@
    getChannels,
    moreBtnStatus,
    activeTask,
    reload,
    reloadChannel,
    setActiveTask,
    moreChannelTasksBtn,
    foldChannelTasksBtn
    foldChannelTasksBtn,
    reloadAllData
  }
})

 src/views/dashboard/components/DashboardTitle.vue

@@ -23,7 +23,7 @@
      </div>
    </div>
  </div>
  <DeviceCheckList v-model="showDevicesModal" :devices="deviceList"></DeviceCheckList>
  <DeviceCheckList v-model="showDevicesModal" @should-reload="emits('shouldReload')"></DeviceCheckList>
  <TroubleTrackerModal v-model="showProblemsModal" :problems="problemList"></TroubleTrackerModal>
</template>
<script setup lang="ts">
@@ -39,6 +39,10 @@
import { apiGetProblemList } from '@/api'
import { PROBLEMS_POLLING_DURATION } from '@/common/constants'

const emits = defineEmits<{
  shouldReload: []
}>()

// 是否显示问题诊断modal
const showProblemsModal = ref(false)
/**

 src/views/dashboard/components/DeviceCheckList.vue

@@ -4,18 +4,18 @@
      <template #title>设备选择</template>
      <div class="device-box">
        <el-scrollbar always class="scroller">
          <template v-if="devices?.length">
          <template v-if="deviceInfo?.deviceIDList?.length">
            <div
              v-for="(item, index) in devices"
              v-for="(item, index) in deviceInfo?.deviceIDList"
              :key="index"
              :class="item.checked ? 'device-item check-item' : 'device-item'"
              @click="deviceClick(index)"
              :class="selectedDevice === item ? 'device-item check-item' : 'device-item'"
              @click="deviceClick(item)"
            >
              <div class="item-l">
                <span>{{ item.number }}</span>
                {{ item.name }}
                <span>{{ item }}</span>
                <!--  {{ item }}-->
              </div>
              <div v-if="item.checked" class="item-r">
              <div v-if="selectedDevice === item" class="item-r">
                <el-icon class="item-icon" size="22" color="#00ff00"><CircleCheckFilled /></el-icon>
              </div>
            </div>
@@ -35,7 +35,11 @@
import { useVModel } from '@vueuse/core'
import { CircleCheckFilled } from '@element-plus/icons-vue'
import BigButton from '@/views/dashboard/components/BigButton.vue'
import { ref } from 'vue'
import { useDevicesStore } from '@/stores/devices'
import { storeToRefs } from 'pinia'
import { ref, watch } from 'vue'
import { apiSetCurrentDevice } from '@/api'
import { ElMessage } from 'element-plus'
export interface DeviceCheckListProps {
  modelValue: boolean
}
@@ -45,28 +49,57 @@

const emit = defineEmits<{
  'update:modelValue': [show: boolean]
  shouldReload: []
}>()
const modelData = useVModel(props, 'modelValue', emit)
const deviceStore = useDevicesStore()
const { deviceInfo } = storeToRefs(deviceStore)

const devices = ref([
  {
    number: '111',
    name: '设备A',
    checked: true
  },
  {
    number: '222',
    name: '设备b'
// 弹窗打开时设定当前选中的设备
const selectedDevice = ref<string>('')
watch(modelData, () => {
  if (modelData.value) {
    selectedDevice.value = deviceInfo.value?.currentDeviceID ?? ''
  }
])
})

function deviceClick(deviceId: string) {
  selectedDevice.value = deviceId
}

function saveModal() {
  if (!selectedDevice.value) {
    ElMessage({
      message: '请先选中一个设备',
      type: 'error',
      duration: 3 * 1000
    })
    return
  }
  apiSetCurrentDevice({ currentDeviceID: selectedDevice.value })
    .then(() => {
      ElMessage({
        message: '设定成功',
        type: 'success',
        duration: 2 * 1000
      })
      modelData.value = false
      emit('shouldReload')
    })
    .catch((err) => {
      console.error(err)
      ElMessage({
        message: err.msg,
        type: 'error',
        duration: 3 * 1000
      })
    })
    .finally(() => {
      deviceStore.startPollingDevice()
    })
}
function closeModal() {
  modelData.value = false
}
function saveModal() {}
const deviceClick = (index) => {
  devices.value.find((ele) => (ele.checked = false))

  devices.value[index].checked = true
}
</script>
<style scoped lang="scss">

 src/views/dashboard/components/ProcessingInfo.vue

@@ -179,6 +179,7 @@
}
:deep(.el-progress-bar__outer) {
  border-radius: 8px;
  background-color: #13235a;
}
:deep(.el-progress-bar__inner) {
  border-radius: 8px;

 src/views/dashboard/index.vue

@@ -7,7 +7,7 @@
      <ChannelCollapse :channels="channels"></ChannelCollapse>
    </template>
    <template #middleBlock1>
      <DashboardTitle></DashboardTitle>
      <DashboardTitle @should-reload="reloadAllData"></DashboardTitle>
    </template>
    <template #middleBlock2>
      <el-tabs v-model="activeMainTabName" class="main-info-tabs">
@@ -39,7 +39,7 @@
    <template #middleBlock3>
      <SubTitle>任务详情</SubTitle>
      <div class="task-detail">
        <TaskControl :task="activeTask" @should-reload="reloadAllData"></TaskControl>
        <TaskControl :task="activeTask" @should-reload="reloadChannel"></TaskControl>
      </div>
      <ColorInfo :type="1"></ColorInfo>
      <ColorInfo :type="2"></ColorInfo>
@@ -142,8 +142,12 @@
 * 完成任务或者下发参数成功后要刷新通道数据
 * @param task
 */
function reloadAllData(task: Task) {
  tasksStore.reload(task.Channel)
function reloadChannel(task: Task) {
  tasksStore.reloadChannel(task.Channel)
}

function reloadAllData() {
  tasksStore.reloadAllData()
}
// 启动plc 轮询
const plcStore = usePLCStore()