Compare commits
No commits in common. 'main' and 'liutao_branch' have entirely different histories.
main
...
liutao_bra
@ -0,0 +1,144 @@
|
||||
{
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"npm.packageManager": "pnpm",
|
||||
"editor.tabSize": 2,
|
||||
"prettier.printWidth": 100, // 超过最大值换行
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"files.eol": "\n",
|
||||
"search.exclude": {
|
||||
"**/node_modules": true,
|
||||
"**/*.log": true,
|
||||
"**/*.log*": true,
|
||||
"**/bower_components": true,
|
||||
"**/dist": true,
|
||||
"**/elehukouben": true,
|
||||
"**/.git": true,
|
||||
"**/.gitignore": true,
|
||||
"**/.svn": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/.idea": true,
|
||||
"**/.vscode": false,
|
||||
"**/yarn.lock": true,
|
||||
"**/tmp": true,
|
||||
"out": true,
|
||||
"dist": true,
|
||||
"node_modules": true,
|
||||
"CHANGELOG.md": true,
|
||||
"examples": true,
|
||||
"res": true,
|
||||
"screenshots": true,
|
||||
"yarn-error.log": true,
|
||||
"**/.yarn": true
|
||||
},
|
||||
"files.exclude": {
|
||||
"**/.cache": true,
|
||||
"**/.editorconfig": true,
|
||||
"**/.eslintcache": true,
|
||||
"**/bower_components": true,
|
||||
"**/.idea": true,
|
||||
"**/tmp": true,
|
||||
"**/.git": true,
|
||||
"**/.svn": true,
|
||||
"**/.hg": true,
|
||||
"**/CVS": true,
|
||||
"**/.DS_Store": true
|
||||
},
|
||||
"files.watcherExclude": {
|
||||
"**/.git/objects/**": true,
|
||||
"**/.git/subtree-cache/**": true,
|
||||
"**/.vscode/**": true,
|
||||
"**/node_modules/**": true,
|
||||
"**/tmp/**": true,
|
||||
"**/bower_components/**": true,
|
||||
"**/dist/**": true,
|
||||
"**/yarn.lock": true
|
||||
},
|
||||
"stylelint.enable": true,
|
||||
"stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"],
|
||||
"path-intellisense.mappings": {
|
||||
"@/": "${workspaceRoot}/src"
|
||||
},
|
||||
"[javascriptreact]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
|
||||
},
|
||||
"[typescriptreact]": {
|
||||
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
|
||||
},
|
||||
"[html]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[css]": {
|
||||
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
|
||||
},
|
||||
"[less]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[scss]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[markdown]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit"
|
||||
},
|
||||
"[vue]": {
|
||||
"editor.defaultFormatter": "Vue.volar"
|
||||
},
|
||||
"i18n-ally.localesPaths": ["src/locales"],
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.sortKeys": true,
|
||||
"i18n-ally.namespace": false,
|
||||
"i18n-ally.enabledParsers": ["ts"],
|
||||
"i18n-ally.sourceLanguage": "en",
|
||||
"i18n-ally.displayLanguage": "zh-CN",
|
||||
"i18n-ally.enabledFrameworks": ["vue", "react"],
|
||||
"cSpell.words": [
|
||||
"brotli",
|
||||
"browserslist",
|
||||
"codemirror",
|
||||
"commitlint",
|
||||
"cropperjs",
|
||||
"echart",
|
||||
"echarts",
|
||||
"esnext",
|
||||
"esno",
|
||||
"iconify",
|
||||
"INTLIFY",
|
||||
"lintstagedrc",
|
||||
"logicflow",
|
||||
"nprogress",
|
||||
"pinia",
|
||||
"pnpm",
|
||||
"qrcode",
|
||||
"sider",
|
||||
"sortablejs",
|
||||
"stylelint",
|
||||
"svgs",
|
||||
"unocss",
|
||||
"unplugin",
|
||||
"unref",
|
||||
"videojs",
|
||||
"VITE",
|
||||
"vitejs",
|
||||
"vueuse",
|
||||
"wangeditor",
|
||||
"xingyu",
|
||||
"yudao",
|
||||
"zxcvbn"
|
||||
],
|
||||
// 控制相关文件嵌套展示
|
||||
"explorer.fileNesting.enabled": true,
|
||||
"explorer.fileNesting.expand": false,
|
||||
"explorer.fileNesting.patterns": {
|
||||
"*.ts": "$(capture).test.ts, $(capture).test.tsx",
|
||||
"*.tsx": "$(capture).test.ts, $(capture).test.tsx",
|
||||
"*.env": "$(capture).env.*",
|
||||
"package.json": "pnpm-lock.yaml,yarn.lock,LICENSE,README*,CHANGELOG*,CNAME,.gitattributes,.eslintrc-auto-import.json,.gitignore,prettier.config.js,stylelint.config.js,commitlint.config.js,.stylelintignore,.prettierignore,.gitpod.yml,.eslintrc.js,.eslintignore"
|
||||
},
|
||||
"terminal.integrated.scrollback": 10000,
|
||||
"nuxt.isNuxtApp": false
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface WarehouseAreaVO {
|
||||
id: number
|
||||
warehouseId: number
|
||||
areaCode: string
|
||||
areaName: string
|
||||
areaSize: number
|
||||
description: string
|
||||
status: number
|
||||
createTime: string
|
||||
}
|
||||
|
||||
export const WarehouseAreaApi = {
|
||||
getWarehouseAreaPage: async (params: any) => {
|
||||
return await request.get({ url: `/erp/warehouse-area/page`, params })
|
||||
},
|
||||
|
||||
getWarehouseArea: async (id: number) => {
|
||||
return await request.get({ url: `/erp/warehouse-area/get?id=` + id })
|
||||
},
|
||||
|
||||
createWarehouseArea: async (data: WarehouseAreaVO) => {
|
||||
return await request.post({ url: `/erp/warehouse-area/create`, data })
|
||||
},
|
||||
|
||||
updateWarehouseArea: async (data: WarehouseAreaVO) => {
|
||||
return await request.put({ url: `/erp/warehouse-area/update`, data })
|
||||
},
|
||||
|
||||
deleteWarehouseArea: async (id: number) => {
|
||||
return await request.delete({ url: `/erp/warehouse-area/delete?id=` + id })
|
||||
}
|
||||
}
|
||||
@ -1,40 +0,0 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface WarehouseLocationVO {
|
||||
id: number
|
||||
warehouseId: number
|
||||
areaId: number
|
||||
code: string
|
||||
name: string
|
||||
areaSize: number
|
||||
maxLoadWeight: number
|
||||
positionX: number
|
||||
positionY: number
|
||||
positionZ: number
|
||||
allowProductMix: boolean
|
||||
allowBatchMix: boolean
|
||||
status: number
|
||||
createTime: string
|
||||
}
|
||||
|
||||
export const WarehouseLocationApi = {
|
||||
getWarehouseLocationPage: async (params: any) => {
|
||||
return await request.get({ url: `/erp/warehouse-location/page`, params })
|
||||
},
|
||||
|
||||
getWarehouseLocation: async (id: number) => {
|
||||
return await request.get({ url: `/erp/warehouse-location/get?id=` + id })
|
||||
},
|
||||
|
||||
createWarehouseLocation: async (data: WarehouseLocationVO) => {
|
||||
return await request.post({ url: `/erp/warehouse-location/create`, data })
|
||||
},
|
||||
|
||||
updateWarehouseLocation: async (data: WarehouseLocationVO) => {
|
||||
return await request.put({ url: `/erp/warehouse-location/update`, data })
|
||||
},
|
||||
|
||||
deleteWarehouseLocation: async (id: number) => {
|
||||
return await request.delete({ url: `/erp/warehouse-location/delete?id=` + id })
|
||||
}
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface DeviceOperationOverviewParams {
|
||||
ids?: string
|
||||
startTime?: string
|
||||
endTime?: string
|
||||
timelinePageNo?: number
|
||||
timelinePageSize?: number
|
||||
}
|
||||
|
||||
export interface DeviceOperationOverviewMetricVO {
|
||||
key: string
|
||||
icon: string
|
||||
value: number
|
||||
unit: string
|
||||
change: number
|
||||
}
|
||||
|
||||
export interface DeviceOperationOverviewHourlyStatusVO {
|
||||
hour: string
|
||||
running: number
|
||||
standby: number
|
||||
fault: number
|
||||
offline: number
|
||||
}
|
||||
|
||||
export interface DeviceOperationOverviewSummaryVO {
|
||||
status: 'running' | 'standby' | 'fault' | 'offline'
|
||||
percent: number
|
||||
hours: number
|
||||
}
|
||||
|
||||
export interface DeviceOperationOverviewTimelineSegmentVO {
|
||||
status: 'running' | 'standby' | 'fault' | 'offline'
|
||||
startHour: number
|
||||
endHour: number
|
||||
}
|
||||
|
||||
export interface DeviceOperationOverviewTimelineRowVO {
|
||||
id: string
|
||||
name: string
|
||||
utilizationRate: number
|
||||
segments: DeviceOperationOverviewTimelineSegmentVO[]
|
||||
}
|
||||
|
||||
export interface DeviceOperationOverviewRespVO {
|
||||
metrics: DeviceOperationOverviewMetricVO[]
|
||||
hourlyStatus: DeviceOperationOverviewHourlyStatusVO[]
|
||||
summary: DeviceOperationOverviewSummaryVO[]
|
||||
summaryTotalHours: number
|
||||
timelineRows: DeviceOperationOverviewTimelineRowVO[]
|
||||
totalDevices: number
|
||||
}
|
||||
|
||||
export const DeviceOperationOverviewApi = {
|
||||
getRunOverview: async (params: DeviceOperationOverviewParams) => {
|
||||
return await request.get<DeviceOperationOverviewRespVO>({
|
||||
url: `/iot/device-operation-record/runOverview`,
|
||||
params
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface CapacityReportVO {
|
||||
id: number
|
||||
deviceCode: string
|
||||
deviceName: string
|
||||
typeName: string
|
||||
deviceStatus: number
|
||||
ratedCapacity: number
|
||||
reportCapacity: number
|
||||
actualCapacity: number
|
||||
workshopName: string
|
||||
}
|
||||
|
||||
export interface CapacityReportQuery {
|
||||
pageNo: number
|
||||
pageSize: number
|
||||
deviceCode?: string
|
||||
deviceName?: string
|
||||
deviceType?: string
|
||||
deviceStatus?: string
|
||||
workshop?: string
|
||||
ids?: string
|
||||
}
|
||||
|
||||
export const DeviceLedgerApi = {
|
||||
/**
|
||||
* 产能报表分页查询
|
||||
*/
|
||||
getCapacityReportPage: async (params: CapacityReportQuery) => {
|
||||
return await request.get({ url: '/mes/device-ledger/capacity-report/page', params })
|
||||
},
|
||||
|
||||
/**
|
||||
* 产能报表导出
|
||||
*/
|
||||
exportCapacityReport: async (params: { ids?: string }) => {
|
||||
return await request.download({ url: '/mes/device-ledger/capacity-report/export-excel', params })
|
||||
},
|
||||
|
||||
/**
|
||||
* 更新设备状态
|
||||
*/
|
||||
updateDeviceLedger: async (data: { id: number; deviceStatus: number }) => {
|
||||
return await request.put({ url: '/mes/device-ledger/update', data })
|
||||
}
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
export interface PrintTemplateVO {
|
||||
id: number
|
||||
templateCode: string
|
||||
templateName: string
|
||||
templateType: number
|
||||
templateBizType: string
|
||||
templateJson: string
|
||||
remark: string
|
||||
isEnable: boolean
|
||||
createTime: string
|
||||
}
|
||||
|
||||
export const PrintTemplateApi = {
|
||||
getPrintTemplatePage: async (params: any) => {
|
||||
return await request.get({ url: `/mes/print-template/page`, params })
|
||||
},
|
||||
getPrintTemplate: async (id: number) => {
|
||||
return await request.get({ url: `/mes/print-template/get?id=` + id })
|
||||
},
|
||||
createPrintTemplate: async (data: PrintTemplateVO) => {
|
||||
return await request.post({ url: `/mes/print-template/create`, data })
|
||||
},
|
||||
updatePrintTemplate: async (data: PrintTemplateVO) => {
|
||||
return await request.put({ url: `/mes/print-template/update`, data })
|
||||
},
|
||||
deletePrintTemplate: async (id: number) => {
|
||||
return await request.delete({ url: `/mes/print-template/delete?id=` + id })
|
||||
},
|
||||
exportPrintTemplate: async (params) => {
|
||||
return await request.download({ url: `/mes/print-template/export-excel`, params })
|
||||
},
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 366 B |
@ -1,5 +1,4 @@
|
||||
import Icon from './src/Icon.vue'
|
||||
import IconSelect from './src/IconSelect.vue'
|
||||
import AppIconSelect from './src/AppIconSelect.vue'
|
||||
|
||||
export { Icon, IconSelect, AppIconSelect }
|
||||
export { Icon, IconSelect }
|
||||
|
||||
@ -1,280 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { uniIconsList, uviewIconsList, uniIconsUnicodeMap, uviewIconsUnicodeMap } from './appIconData'
|
||||
|
||||
defineOptions({ name: 'AppIconSelect' })
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
require: false,
|
||||
type: String
|
||||
},
|
||||
clearable: {
|
||||
require: false,
|
||||
type: Boolean
|
||||
}
|
||||
})
|
||||
const emit = defineEmits<{ (e: 'update:modelValue', v: string) }>()
|
||||
|
||||
const visible = ref(false)
|
||||
const inputValue = toRef(props, 'modelValue')
|
||||
const currentActiveType = ref('uni-icons')
|
||||
const filterValue = ref('')
|
||||
|
||||
const iconDataMap: Record<string, string[]> = {
|
||||
'uni-icons': uniIconsList,
|
||||
'uview-plus': uviewIconsList
|
||||
}
|
||||
|
||||
const unicodeMapMap: Record<string, Record<string, string>> = {
|
||||
'uni-icons': uniIconsUnicodeMap,
|
||||
'uview-plus': uviewIconsUnicodeMap
|
||||
}
|
||||
|
||||
const fontFamilyMap: Record<string, string> = {
|
||||
'uni-icons': 'UniIconsFontFamily',
|
||||
'uview-plus': 'uview-iconfont'
|
||||
}
|
||||
|
||||
const tabsList = [
|
||||
{ label: 'uni-icons', name: 'uni-icons' },
|
||||
{ label: 'uview-plus', name: 'uview-plus' }
|
||||
]
|
||||
|
||||
const pageSize = ref(96)
|
||||
const currentPage = ref(1)
|
||||
|
||||
const currentIconList = computed(() => {
|
||||
return iconDataMap[currentActiveType.value] || []
|
||||
})
|
||||
|
||||
const currentUnicodeMap = computed(() => {
|
||||
return unicodeMapMap[currentActiveType.value] || {}
|
||||
})
|
||||
|
||||
const currentFontFamily = computed(() => {
|
||||
return fontFamilyMap[currentActiveType.value] || 'UniIconsFontFamily'
|
||||
})
|
||||
|
||||
const filteredList = computed(() => {
|
||||
return currentIconList.value.filter((v) =>
|
||||
v.toLowerCase().includes(filterValue.value.toLowerCase())
|
||||
)
|
||||
})
|
||||
|
||||
const pageList = computed(() => {
|
||||
if (currentPage.value === 1) {
|
||||
return filteredList.value.slice(0, pageSize.value)
|
||||
}
|
||||
return filteredList.value.slice(
|
||||
pageSize.value * (currentPage.value - 1),
|
||||
pageSize.value * (currentPage.value - 1) + pageSize.value
|
||||
)
|
||||
})
|
||||
|
||||
const iconCount = computed(() => filteredList.value.length)
|
||||
|
||||
function parseIconValue(value: string): { prefix: string; name: string } | null {
|
||||
if (!value || value.indexOf(':') < 0) return null
|
||||
const idx = value.indexOf(':')
|
||||
return {
|
||||
prefix: value.substring(0, idx),
|
||||
name: value.substring(idx + 1)
|
||||
}
|
||||
}
|
||||
|
||||
function getUnicode(name: string): string {
|
||||
return currentUnicodeMap.value[name] || ''
|
||||
}
|
||||
|
||||
function getSelectedFontFamily(fullValue: string): string {
|
||||
const parsed = parseIconValue(fullValue)
|
||||
if (!parsed) return 'UniIconsFontFamily'
|
||||
return fontFamilyMap[parsed.prefix] || 'UniIconsFontFamily'
|
||||
}
|
||||
|
||||
function getSelectedUnicode(fullValue: string): string {
|
||||
const parsed = parseIconValue(fullValue)
|
||||
if (!parsed) return ''
|
||||
const map = unicodeMapMap[parsed.prefix]
|
||||
return map ? map[parsed.name] || '' : ''
|
||||
}
|
||||
|
||||
function handleClick({ props }: any) {
|
||||
currentPage.value = 1
|
||||
currentActiveType.value = props.name
|
||||
}
|
||||
|
||||
function onChangeIcon(item: string) {
|
||||
emit('update:modelValue', currentActiveType.value + ':' + item)
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
function onCurrentChange(page: number) {
|
||||
currentPage.value = page
|
||||
}
|
||||
|
||||
function clearIcon() {
|
||||
emit('update:modelValue', '')
|
||||
visible.value = false
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => {
|
||||
if (val) {
|
||||
const parsed = parseIconValue(val)
|
||||
if (parsed && fontFamilyMap[parsed.prefix]) {
|
||||
currentActiveType.value = parsed.prefix
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => filterValue.value,
|
||||
() => {
|
||||
currentPage.value = 1
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="selector">
|
||||
<ElInput v-model="inputValue" @click="visible = !visible" :clearable="props.clearable" @clear="clearIcon">
|
||||
<template #append>
|
||||
<ElPopover
|
||||
:visible="visible"
|
||||
:width="355"
|
||||
popper-class="pure-popper"
|
||||
trigger="click"
|
||||
>
|
||||
<template #reference>
|
||||
<div
|
||||
class="h-32px w-40px flex cursor-pointer items-center justify-center"
|
||||
@click="visible = !visible"
|
||||
>
|
||||
<span
|
||||
v-if="inputValue && getSelectedUnicode(inputValue)"
|
||||
class="app-icon-font"
|
||||
:style="{ fontFamily: getSelectedFontFamily(inputValue), fontSize: '18px' }"
|
||||
>{{ getSelectedUnicode(inputValue) }}</span>
|
||||
<span v-else class="text-12px color-gray-500">选择</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ElInput v-model="filterValue" class="p-2" clearable placeholder="搜索图标" />
|
||||
<ElDivider border-style="dashed" />
|
||||
|
||||
<ElTabs v-model="currentActiveType" @tab-click="handleClick">
|
||||
<ElTabPane
|
||||
v-for="(pane, index) in tabsList"
|
||||
:key="index"
|
||||
:label="pane.label"
|
||||
:name="pane.name"
|
||||
>
|
||||
<ElDivider border-style="dashed" class="tab-divider" />
|
||||
<ElScrollbar height="220px">
|
||||
<ul class="ml-2 flex flex-wrap">
|
||||
<li
|
||||
v-for="(item, key) in pageList"
|
||||
:key="key"
|
||||
:style="inputValue === currentActiveType + ':' + item ? { borderColor: 'var(--el-color-primary)', color: 'var(--el-color-primary)' } : {}"
|
||||
:title="item"
|
||||
class="icon-item mr-2 mt-1 w-1/10 flex cursor-pointer items-center justify-center border border-solid p-2"
|
||||
@click="onChangeIcon(item)"
|
||||
>
|
||||
<span
|
||||
class="app-icon-font"
|
||||
:style="{ fontFamily: currentFontFamily }"
|
||||
>{{ getUnicode(item) }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</ElScrollbar>
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
<ElDivider border-style="dashed" />
|
||||
|
||||
<ElPagination
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:total="iconCount"
|
||||
background
|
||||
class="h-10 flex items-center justify-center"
|
||||
layout="prev, pager, next"
|
||||
size="small"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</ElPopover>
|
||||
</template>
|
||||
</ElInput>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@font-face {
|
||||
font-family: 'UniIconsFontFamily';
|
||||
src: url('@/assets/fonts/uniicons.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'uview-iconfont';
|
||||
src: url('@/assets/fonts/uview-icons.ttf') format('truetype');
|
||||
font-display: swap;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-icon-font {
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 1px auto !important;
|
||||
}
|
||||
|
||||
.tab-divider.el-divider--horizontal {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
border-color: var(--el-color-primary);
|
||||
transform: scaleX(1.05);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-next) {
|
||||
font-size: 15px;
|
||||
line-height: 32px;
|
||||
box-shadow: -5px 0 5px -6px #ccc;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__nav-prev) {
|
||||
font-size: 15px;
|
||||
line-height: 32px;
|
||||
box-shadow: 5px 0 5px -6px #ccc;
|
||||
}
|
||||
|
||||
:deep(.el-input-group__append) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__item) {
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
:deep(.el-tabs__header),
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
position: static;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,382 +0,0 @@
|
||||
const uniIconsUnicodeMap: Record<string, string> = {
|
||||
'arrow-down': '\ue6be',
|
||||
'arrow-left': '\ue6bc',
|
||||
'arrow-right': '\ue6bb',
|
||||
'arrow-up': '\ue6bd',
|
||||
'auth': '\ue6ab',
|
||||
'auth-filled': '\ue6cc',
|
||||
'back': '\ue6b9',
|
||||
'bars': '\ue627',
|
||||
'calendar': '\ue6a0',
|
||||
'calendar-filled': '\ue6c0',
|
||||
'camera': '\ue65a',
|
||||
'camera-filled': '\ue658',
|
||||
'cart': '\ue631',
|
||||
'cart-filled': '\ue6d0',
|
||||
'chat': '\ue65d',
|
||||
'chat-filled': '\ue659',
|
||||
'chatboxes': '\ue696',
|
||||
'chatboxes-filled': '\ue692',
|
||||
'chatbubble': '\ue697',
|
||||
'chatbubble-filled': '\ue694',
|
||||
'checkbox': '\ue62b',
|
||||
'checkbox-filled': '\ue62c',
|
||||
'checkmarkempty': '\ue65c',
|
||||
'circle': '\ue65b',
|
||||
'circle-filled': '\ue65e',
|
||||
'clear': '\ue66d',
|
||||
'close': '\ue673',
|
||||
'closeempty': '\ue66c',
|
||||
'cloud-download': '\ue647',
|
||||
'cloud-download-filled': '\ue646',
|
||||
'cloud-upload': '\ue645',
|
||||
'cloud-upload-filled': '\ue648',
|
||||
'color': '\ue6cf',
|
||||
'color-filled': '\ue6c9',
|
||||
'compose': '\ue67f',
|
||||
'contact': '\ue693',
|
||||
'contact-filled': '\ue695',
|
||||
'down': '\ue6b8',
|
||||
'bottom': '\ue6b8',
|
||||
'download': '\ue68d',
|
||||
'download-filled': '\ue681',
|
||||
'email': '\ue69e',
|
||||
'email-filled': '\ue69a',
|
||||
'eye': '\ue651',
|
||||
'eye-filled': '\ue66a',
|
||||
'eye-slash': '\ue6b3',
|
||||
'eye-slash-filled': '\ue6b4',
|
||||
'fire': '\ue6a1',
|
||||
'fire-filled': '\ue6c5',
|
||||
'flag': '\ue65f',
|
||||
'flag-filled': '\ue660',
|
||||
'folder-add': '\ue6a9',
|
||||
'folder-add-filled': '\ue6c8',
|
||||
'font': '\ue6a3',
|
||||
'forward': '\ue6ba',
|
||||
'gear': '\ue664',
|
||||
'gear-filled': '\ue661',
|
||||
'gift': '\ue6a4',
|
||||
'gift-filled': '\ue6c4',
|
||||
'hand-down': '\ue63d',
|
||||
'hand-down-filled': '\ue63c',
|
||||
'hand-up': '\ue63f',
|
||||
'hand-up-filled': '\ue63e',
|
||||
'headphones': '\ue630',
|
||||
'heart': '\ue639',
|
||||
'heart-filled': '\ue641',
|
||||
'help': '\ue679',
|
||||
'help-filled': '\ue674',
|
||||
'home': '\ue662',
|
||||
'home-filled': '\ue663',
|
||||
'image': '\ue670',
|
||||
'image-filled': '\ue678',
|
||||
'images': '\ue650',
|
||||
'images-filled': '\ue64b',
|
||||
'info': '\ue669',
|
||||
'info-filled': '\ue649',
|
||||
'left': '\ue6b7',
|
||||
'link': '\ue6a5',
|
||||
'list': '\ue644',
|
||||
'location': '\ue6ae',
|
||||
'location-filled': '\ue6af',
|
||||
'locked': '\ue66b',
|
||||
'locked-filled': '\ue668',
|
||||
'loop': '\ue633',
|
||||
'mail-open': '\ue643',
|
||||
'mail-open-filled': '\ue63a',
|
||||
'map': '\ue667',
|
||||
'map-filled': '\ue666',
|
||||
'map-pin': '\ue6ad',
|
||||
'map-pin-ellipse': '\ue6ac',
|
||||
'medal': '\ue6a2',
|
||||
'medal-filled': '\ue6c3',
|
||||
'mic': '\ue671',
|
||||
'mic-filled': '\ue677',
|
||||
'micoff': '\ue67e',
|
||||
'micoff-filled': '\ue6b0',
|
||||
'minus': '\ue66f',
|
||||
'minus-filled': '\ue67d',
|
||||
'more': '\ue64d',
|
||||
'more-filled': '\ue64e',
|
||||
'navigate': '\ue66e',
|
||||
'navigate-filled': '\ue67a',
|
||||
'notification': '\ue6a6',
|
||||
'notification-filled': '\ue6c1',
|
||||
'paperclip': '\ue652',
|
||||
'paperplane': '\ue672',
|
||||
'paperplane-filled': '\ue675',
|
||||
'person': '\ue699',
|
||||
'person-filled': '\ue69d',
|
||||
'personadd': '\ue69f',
|
||||
'personadd-filled': '\ue698',
|
||||
'phone': '\ue69c',
|
||||
'phone-filled': '\ue69b',
|
||||
'plus': '\ue676',
|
||||
'plus-filled': '\ue6c7',
|
||||
'plusempty': '\ue67b',
|
||||
'pulldown': '\ue632',
|
||||
'pyq': '\ue682',
|
||||
'qq': '\ue680',
|
||||
'redo': '\ue64a',
|
||||
'redo-filled': '\ue655',
|
||||
'refresh': '\ue657',
|
||||
'refresh-filled': '\ue656',
|
||||
'refreshempty': '\ue6bf',
|
||||
'reload': '\ue6b2',
|
||||
'right': '\ue6b5',
|
||||
'scan': '\ue62a',
|
||||
'search': '\ue654',
|
||||
'settings': '\ue653',
|
||||
'settings-filled': '\ue6ce',
|
||||
'shop': '\ue62f',
|
||||
'shop-filled': '\ue6cd',
|
||||
'smallcircle': '\ue67c',
|
||||
'smallcircle-filled': '\ue665',
|
||||
'sound': '\ue684',
|
||||
'sound-filled': '\ue686',
|
||||
'spinner-cycle': '\ue68a',
|
||||
'staff': '\ue6a7',
|
||||
'staff-filled': '\ue6cb',
|
||||
'star': '\ue688',
|
||||
'star-filled': '\ue68f',
|
||||
'starhalf': '\ue683',
|
||||
'trash': '\ue687',
|
||||
'trash-filled': '\ue685',
|
||||
'tune': '\ue6aa',
|
||||
'tune-filled': '\ue6ca',
|
||||
'undo': '\ue64f',
|
||||
'undo-filled': '\ue64c',
|
||||
'up': '\ue6b6',
|
||||
'top': '\ue6b6',
|
||||
'upload': '\ue690',
|
||||
'upload-filled': '\ue68e',
|
||||
'videocam': '\ue68c',
|
||||
'videocam-filled': '\ue689',
|
||||
'vip': '\ue6a8',
|
||||
'vip-filled': '\ue6c6',
|
||||
'wallet': '\ue6b1',
|
||||
'wallet-filled': '\ue6c2',
|
||||
'weibo': '\ue68b',
|
||||
'weixin': '\ue691'
|
||||
}
|
||||
|
||||
const uviewIconsUnicodeMap: Record<string, string> = {
|
||||
'level': '\ue693',
|
||||
'column-line': '\ue68e',
|
||||
'checkbox-mark': '\ue807',
|
||||
'folder': '\ue7f5',
|
||||
'movie': '\ue7f6',
|
||||
'star-fill': '\ue669',
|
||||
'star': '\ue65f',
|
||||
'phone-fill': '\ue64f',
|
||||
'phone': '\ue622',
|
||||
'apple-fill': '\ue881',
|
||||
'chrome-circle-fill': '\ue885',
|
||||
'backspace': '\ue67b',
|
||||
'attach': '\ue632',
|
||||
'cut': '\ue948',
|
||||
'empty-car': '\ue602',
|
||||
'empty-coupon': '\ue682',
|
||||
'empty-address': '\ue646',
|
||||
'empty-favor': '\ue67c',
|
||||
'empty-permission': '\ue686',
|
||||
'empty-news': '\ue687',
|
||||
'empty-search': '\ue664',
|
||||
'github-circle-fill': '\ue887',
|
||||
'rmb': '\ue608',
|
||||
'person-delete-fill': '\ue66a',
|
||||
'reload': '\ue788',
|
||||
'order': '\ue68f',
|
||||
'server-man': '\ue6bc',
|
||||
'search': '\ue62a',
|
||||
'fingerprint': '\ue955',
|
||||
'more-dot-fill': '\ue630',
|
||||
'scan': '\ue662',
|
||||
'share-square': '\ue60b',
|
||||
'map': '\ue61d',
|
||||
'map-fill': '\ue64e',
|
||||
'tags': '\ue629',
|
||||
'tags-fill': '\ue651',
|
||||
'bookmark-fill': '\ue63b',
|
||||
'bookmark': '\ue60a',
|
||||
'eye': '\ue613',
|
||||
'eye-fill': '\ue641',
|
||||
'mic': '\ue64a',
|
||||
'mic-off': '\ue649',
|
||||
'calendar': '\ue66e',
|
||||
'calendar-fill': '\ue634',
|
||||
'trash': '\ue623',
|
||||
'trash-fill': '\ue658',
|
||||
'play-left': '\ue66d',
|
||||
'play-right': '\ue610',
|
||||
'minus': '\ue618',
|
||||
'plus': '\ue62d',
|
||||
'info': '\ue653',
|
||||
'info-circle': '\ue7d2',
|
||||
'info-circle-fill': '\ue64b',
|
||||
'question': '\ue715',
|
||||
'error': '\ue6d3',
|
||||
'close': '\ue685',
|
||||
'checkmark': '\ue6a8',
|
||||
'android-circle-fill': '\ue67e',
|
||||
'android-fill': '\ue67d',
|
||||
'ie': '\ue87b',
|
||||
'IE-circle-fill': '\ue889',
|
||||
'google': '\ue87a',
|
||||
'google-circle-fill': '\ue88a',
|
||||
'setting-fill': '\ue872',
|
||||
'setting': '\ue61f',
|
||||
'minus-square-fill': '\ue855',
|
||||
'plus-square-fill': '\ue856',
|
||||
'heart': '\ue7df',
|
||||
'heart-fill': '\ue851',
|
||||
'camera': '\ue7d7',
|
||||
'camera-fill': '\ue870',
|
||||
'more-circle': '\ue63e',
|
||||
'more-circle-fill': '\ue645',
|
||||
'chat': '\ue620',
|
||||
'chat-fill': '\ue61e',
|
||||
'bag-fill': '\ue617',
|
||||
'bag': '\ue619',
|
||||
'error-circle-fill': '\ue62c',
|
||||
'error-circle': '\ue624',
|
||||
'close-circle': '\ue63f',
|
||||
'close-circle-fill': '\ue637',
|
||||
'checkmark-circle': '\ue63d',
|
||||
'checkmark-circle-fill': '\ue635',
|
||||
'question-circle-fill': '\ue666',
|
||||
'question-circle': '\ue625',
|
||||
'share': '\ue631',
|
||||
'share-fill': '\ue65e',
|
||||
'shopping-cart': '\ue621',
|
||||
'shopping-cart-fill': '\ue65d',
|
||||
'bell': '\ue609',
|
||||
'bell-fill': '\ue640',
|
||||
'list': '\ue650',
|
||||
'list-dot': '\ue616',
|
||||
'zhihu': '\ue6ba',
|
||||
'zhihu-circle-fill': '\ue709',
|
||||
'zhifubao': '\ue6b9',
|
||||
'zhifubao-circle-fill': '\ue6b8',
|
||||
'weixin-circle-fill': '\ue6b1',
|
||||
'weixin-fill': '\ue6b2',
|
||||
'twitter-circle-fill': '\ue6ab',
|
||||
'twitter': '\ue6aa',
|
||||
'taobao-circle-fill': '\ue6a7',
|
||||
'taobao': '\ue6a6',
|
||||
'weibo-circle-fill': '\ue6a5',
|
||||
'weibo': '\ue6a4',
|
||||
'qq-fill': '\ue6a1',
|
||||
'qq-circle-fill': '\ue6a0',
|
||||
'moments-circel-fill': '\ue69a',
|
||||
'moments': '\ue69b',
|
||||
'qzone': '\ue695',
|
||||
'qzone-circle-fill': '\ue696',
|
||||
'baidu-circle-fill': '\ue680',
|
||||
'baidu': '\ue681',
|
||||
'facebook-circle-fill': '\ue68a',
|
||||
'facebook': '\ue689',
|
||||
'car': '\ue60c',
|
||||
'car-fill': '\ue636',
|
||||
'warning-fill': '\ue64d',
|
||||
'warning': '\ue694',
|
||||
'clock-fill': '\ue638',
|
||||
'clock': '\ue60f',
|
||||
'edit-pen': '\ue612',
|
||||
'edit-pen-fill': '\ue66b',
|
||||
'email': '\ue611',
|
||||
'email-fill': '\ue642',
|
||||
'minus-circle': '\ue61b',
|
||||
'minus-circle-fill': '\ue652',
|
||||
'plus-circle': '\ue62e',
|
||||
'plus-circle-fill': '\ue661',
|
||||
'file-text': '\ue663',
|
||||
'file-text-fill': '\ue665',
|
||||
'pushpin': '\ue7e3',
|
||||
'pushpin-fill': '\ue86e',
|
||||
'grid': '\ue673',
|
||||
'grid-fill': '\ue678',
|
||||
'play-circle': '\ue647',
|
||||
'play-circle-fill': '\ue655',
|
||||
'pause-circle-fill': '\ue654',
|
||||
'pause': '\ue8fa',
|
||||
'pause-circle': '\ue643',
|
||||
'eye-off': '\ue648',
|
||||
'eye-off-outline': '\ue62b',
|
||||
'gift-fill': '\ue65c',
|
||||
'gift': '\ue65b',
|
||||
'rmb-circle-fill': '\ue657',
|
||||
'rmb-circle': '\ue677',
|
||||
'kefu-ermai': '\ue656',
|
||||
'server-fill': '\ue751',
|
||||
'coupon-fill': '\ue8c4',
|
||||
'coupon': '\ue8ae',
|
||||
'integral': '\ue704',
|
||||
'integral-fill': '\ue703',
|
||||
'home-fill': '\ue964',
|
||||
'home': '\ue965',
|
||||
'hourglass-half-fill': '\ue966',
|
||||
'hourglass': '\ue967',
|
||||
'account': '\ue628',
|
||||
'plus-people-fill': '\ue626',
|
||||
'minus-people-fill': '\ue615',
|
||||
'account-fill': '\ue614',
|
||||
'thumb-down-fill': '\ue726',
|
||||
'thumb-down': '\ue727',
|
||||
'thumb-up': '\ue733',
|
||||
'thumb-up-fill': '\ue72f',
|
||||
'lock-fill': '\ue979',
|
||||
'lock-open': '\ue973',
|
||||
'lock-opened-fill': '\ue974',
|
||||
'lock': '\ue97a',
|
||||
'red-packet-fill': '\ue690',
|
||||
'photo-fill': '\ue98b',
|
||||
'photo': '\ue98d',
|
||||
'volume-off-fill': '\ue659',
|
||||
'volume-off': '\ue644',
|
||||
'volume-fill': '\ue670',
|
||||
'volume': '\ue633',
|
||||
'red-packet': '\ue691',
|
||||
'download': '\ue63c',
|
||||
'arrow-up-fill': '\ue6b0',
|
||||
'arrow-down-fill': '\ue600',
|
||||
'play-left-fill': '\ue675',
|
||||
'play-right-fill': '\ue676',
|
||||
'rewind-left-fill': '\ue679',
|
||||
'rewind-right-fill': '\ue67a',
|
||||
'arrow-downward': '\ue604',
|
||||
'arrow-leftward': '\ue601',
|
||||
'arrow-rightward': '\ue603',
|
||||
'arrow-upward': '\ue607',
|
||||
'arrow-down': '\ue60d',
|
||||
'arrow-right': '\ue605',
|
||||
'arrow-left': '\ue60e',
|
||||
'arrow-up': '\ue606',
|
||||
'skip-back-left': '\ue674',
|
||||
'skip-forward-right': '\ue672',
|
||||
'rewind-right': '\ue66f',
|
||||
'rewind-left': '\ue671',
|
||||
'arrow-right-double': '\ue68d',
|
||||
'arrow-left-double': '\ue68c',
|
||||
'wifi-off': '\ue668',
|
||||
'wifi': '\ue667',
|
||||
'empty-data': '\ue62f',
|
||||
'empty-history': '\ue684',
|
||||
'empty-list': '\ue68b',
|
||||
'empty-page': '\ue627',
|
||||
'empty-order': '\ue639',
|
||||
'man': '\ue697',
|
||||
'woman': '\ue69c',
|
||||
'man-add': '\ue61c',
|
||||
'man-add-fill': '\ue64c',
|
||||
'man-delete': '\ue61a',
|
||||
'man-delete-fill': '\ue66a',
|
||||
'zh': '\ue70a',
|
||||
'en': '\ue692'
|
||||
}
|
||||
|
||||
const uniIconsList = Object.keys(uniIconsUnicodeMap)
|
||||
const uviewIconsList = Object.keys(uviewIconsUnicodeMap)
|
||||
|
||||
export { uniIconsList, uviewIconsList, uniIconsUnicodeMap, uviewIconsUnicodeMap }
|
||||
@ -1,371 +0,0 @@
|
||||
<template>
|
||||
<div class="qrcode-action-card">
|
||||
<el-image
|
||||
v-if="imageUrl"
|
||||
:src="imageUrl"
|
||||
:preview-src-list="[imageUrl]"
|
||||
preview-teleported
|
||||
fit="cover"
|
||||
class="qrcode-action-card__img"
|
||||
>
|
||||
<template #error>
|
||||
<div class="qrcode-action-card__error">{{ errorText || emptyText }}</div>
|
||||
</template>
|
||||
</el-image>
|
||||
<div v-else class="qrcode-action-card__error">{{ emptyText }}</div>
|
||||
<div v-if="showActionMask" class="qrcode-action-card__mask">
|
||||
<el-button v-if="showPreview" circle :disabled="!imageUrl" @click="handlePreview">
|
||||
<Icon icon="ep:zoom-in" />
|
||||
</el-button>
|
||||
<el-button v-if="showPrint" circle :disabled="!imageUrl || printDisabled" @click="handlePrint">
|
||||
<Icon icon="ep:printer" />
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="showRefresh"
|
||||
circle
|
||||
:loading="refreshLoading"
|
||||
:disabled="refreshDisabled || refreshLoading"
|
||||
@click="handleRefresh"
|
||||
>
|
||||
<Icon icon="ep:refresh" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<HiprintPreviewDialog ref="hiprintPreviewDialogRef" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import request from '@/config/axios'
|
||||
import HiprintPreviewDialog from '@/components/HiprintPreviewDialog/index.vue'
|
||||
import { createImageViewer } from '@/components/ImageViewer'
|
||||
import { ElLoading } from 'element-plus'
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
imageUrl?: string
|
||||
printId?: string | number
|
||||
printTitle?: string
|
||||
emptyText?: string
|
||||
refreshUrl?: string
|
||||
refreshMethod?: 'post' | 'put' | 'get'
|
||||
refreshDisabled?: boolean
|
||||
printDisabled?: boolean
|
||||
refreshConfirmText?: string
|
||||
errorText?: string
|
||||
showPreview?: boolean
|
||||
showPrint?: boolean
|
||||
showRefresh?: boolean
|
||||
printAdaptive?: boolean
|
||||
printPaperWidth?: number
|
||||
printPaperHeight?: number
|
||||
printMaxWidth?: number
|
||||
printMaxHeight?: number
|
||||
templateJsonUrl?: string
|
||||
templateJson?: any
|
||||
printData?: Record<string, any>
|
||||
}>(),
|
||||
{
|
||||
imageUrl: '',
|
||||
printId: '',
|
||||
printTitle: '二维码打印预览',
|
||||
emptyText: '',
|
||||
refreshUrl: '',
|
||||
refreshMethod: 'post',
|
||||
refreshDisabled: false,
|
||||
printDisabled: false,
|
||||
refreshConfirmText: '',
|
||||
errorText: '',
|
||||
showPreview: true,
|
||||
showPrint: true,
|
||||
showRefresh: true,
|
||||
printAdaptive: true,
|
||||
printPaperWidth: 80,
|
||||
printPaperHeight: 80,
|
||||
printMaxWidth: 180,
|
||||
printMaxHeight: 120,
|
||||
templateJsonUrl: '',
|
||||
templateJson: undefined,
|
||||
printData: () => ({})
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'refresh-success', data: any): void
|
||||
}>()
|
||||
|
||||
const hiprintPreviewDialogRef = ref()
|
||||
const refreshLoading = ref(false)
|
||||
|
||||
const showActionMask = computed(() => props.showPreview || props.showPrint || props.showRefresh)
|
||||
|
||||
const buildQrcodeTemplateJson = (
|
||||
qrcodeUrl: string,
|
||||
printId: string,
|
||||
imageWidth: number,
|
||||
imageHeight: number,
|
||||
paperHeight: number
|
||||
) => ({
|
||||
panels: [
|
||||
{
|
||||
index: 0,
|
||||
name: 1,
|
||||
width: imageWidth,
|
||||
height: paperHeight,
|
||||
paperHeader: 0,
|
||||
paperFooter: 0,
|
||||
printElements: [
|
||||
{
|
||||
options: {
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: imageWidth,
|
||||
height: imageHeight,
|
||||
src: qrcodeUrl,
|
||||
field: 'qrcodeUrl',
|
||||
title: '二维码图片',
|
||||
testData: qrcodeUrl
|
||||
},
|
||||
printElementType: {
|
||||
title: '图片',
|
||||
type: 'image'
|
||||
}
|
||||
},
|
||||
{
|
||||
options: {
|
||||
left: 0,
|
||||
top: imageHeight + 2,
|
||||
height: 10,
|
||||
width: imageWidth,
|
||||
testData: printId,
|
||||
title: 'ID',
|
||||
field: 'printId',
|
||||
textAlign: 'center',
|
||||
fontSize: 10
|
||||
},
|
||||
printElementType: {
|
||||
title: '文本',
|
||||
type: 'text'
|
||||
}
|
||||
}
|
||||
],
|
||||
paperNumberDisabled: true,
|
||||
paperNumberContinue: true,
|
||||
watermarkOptions: {},
|
||||
panelLayoutOptions: {}
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const getImageSize = (src: string) =>
|
||||
new Promise<{ width: number; height: number }>((resolve, reject) => {
|
||||
const img = new Image()
|
||||
img.onload = () => {
|
||||
const width = img.naturalWidth || img.width
|
||||
const height = img.naturalHeight || img.height
|
||||
if (!width || !height) {
|
||||
reject(new Error('invalid image size'))
|
||||
return
|
||||
}
|
||||
resolve({ width, height })
|
||||
}
|
||||
img.onerror = () => reject(new Error('image load failed'))
|
||||
img.src = src
|
||||
})
|
||||
|
||||
const resolvePrintSize = async (src: string) => {
|
||||
const fallbackWidth = Math.max(20, Number(props.printPaperWidth) || 80)
|
||||
const fallbackHeight = Math.max(20, Number(props.printPaperHeight) || 80)
|
||||
if (!props.printAdaptive) {
|
||||
return { width: fallbackWidth, height: fallbackHeight }
|
||||
}
|
||||
try {
|
||||
const size = await getImageSize(src)
|
||||
const ratio = size.width / size.height
|
||||
if (!Number.isFinite(ratio) || ratio <= 0) {
|
||||
return { width: fallbackWidth, height: fallbackHeight }
|
||||
}
|
||||
if (ratio >= 1) {
|
||||
const height = fallbackHeight
|
||||
const width = Math.min(Math.max(fallbackWidth, Math.round(height * ratio)), Number(props.printMaxWidth) || 180)
|
||||
return { width, height }
|
||||
}
|
||||
const width = fallbackWidth
|
||||
const height = Math.min(Math.max(fallbackHeight, Math.round(width / ratio)), Number(props.printMaxHeight) || 120)
|
||||
return { width, height }
|
||||
} catch {
|
||||
return { width: fallbackWidth, height: fallbackHeight }
|
||||
}
|
||||
}
|
||||
|
||||
const handlePreview = () => {
|
||||
if (!props.imageUrl) return
|
||||
createImageViewer({
|
||||
zIndex: 9999999,
|
||||
urlList: [props.imageUrl]
|
||||
})
|
||||
}
|
||||
|
||||
const replaceTemplateValues = (templateJson: any, printData: Record<string, any>) => {
|
||||
if (!templateJson?.panels) return templateJson
|
||||
|
||||
return {
|
||||
...templateJson,
|
||||
panels: templateJson.panels.map((panel: any) => ({
|
||||
...panel,
|
||||
printElements: panel.printElements?.map((element: any) => {
|
||||
if (!element?.options?.qid) return element
|
||||
|
||||
const qid = element.options.qid
|
||||
const value = printData[qid]
|
||||
|
||||
if (value === undefined || value === null) return element
|
||||
|
||||
const newOptions = { ...element.options }
|
||||
|
||||
if (qid === 'qrcodeUrl') {
|
||||
newOptions.src = value
|
||||
newOptions.testData = value
|
||||
} else {
|
||||
newOptions.field = qid
|
||||
if (newOptions.testData === undefined || newOptions.testData === '') {
|
||||
newOptions.testData = String(value)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...element,
|
||||
options: newOptions
|
||||
}
|
||||
}) || []
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
const handlePrint = async () => {
|
||||
if (!props.imageUrl || !props.showPrint) return
|
||||
|
||||
let templateJson: any
|
||||
let printData: Record<string, any>
|
||||
|
||||
printData = {
|
||||
qrcodeUrl: props.imageUrl,
|
||||
printId: props.printId === undefined || props.printId === null ? '' : String(props.printId),
|
||||
...props.printData
|
||||
}
|
||||
|
||||
if (props.templateJson) {
|
||||
templateJson = replaceTemplateValues(props.templateJson, printData)
|
||||
} else if (props.templateJsonUrl) {
|
||||
try {
|
||||
const response = await request.get({ url: props.templateJsonUrl })
|
||||
templateJson = typeof response.data === 'string' ? JSON.parse(response.data) : response.data
|
||||
templateJson = replaceTemplateValues(templateJson, printData)
|
||||
} catch (error) {
|
||||
console.error('获取打印模板失败', error)
|
||||
message.error('获取打印模板失败')
|
||||
return
|
||||
}
|
||||
} else {
|
||||
const printSize = await resolvePrintSize(props.imageUrl)
|
||||
const imageWidth = printSize.width
|
||||
const imageHeight = printSize.height
|
||||
const printId = props.printId === undefined || props.printId === null ? '' : String(props.printId)
|
||||
const idAreaHeight = printId ? 14 : 0
|
||||
const paperHeight = imageHeight + idAreaHeight
|
||||
|
||||
templateJson = buildQrcodeTemplateJson(props.imageUrl, printId, imageWidth, imageHeight, paperHeight)
|
||||
}
|
||||
|
||||
const paperSize = templateJson?.panels?.[0] ? {
|
||||
width: templateJson.panels[0].width,
|
||||
height: templateJson.panels[0].height
|
||||
} : { width: 80, height: 80 }
|
||||
|
||||
hiprintPreviewDialogRef.value?.open({
|
||||
title: props.printTitle,
|
||||
printData,
|
||||
templateJson,
|
||||
withDefaultQrcodeLayout: false,
|
||||
paperSize
|
||||
})
|
||||
}
|
||||
|
||||
const handleRefresh = async () => {
|
||||
if (!props.refreshUrl || props.refreshDisabled || !props.showRefresh) return
|
||||
try {
|
||||
await message.confirm(props.refreshConfirmText || '确认刷新二维码吗？')
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
refreshLoading.value = true
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: t('common.loading'),
|
||||
background: 'rgba(0, 0, 0, 0.3)'
|
||||
})
|
||||
try {
|
||||
let data
|
||||
if (props.refreshMethod === 'get') {
|
||||
data = await request.get({ url: props.refreshUrl })
|
||||
} else if (props.refreshMethod === 'put') {
|
||||
data = await request.put({ url: props.refreshUrl })
|
||||
} else {
|
||||
data = await request.post({ url: props.refreshUrl })
|
||||
}
|
||||
emit('refresh-success', data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
} finally {
|
||||
loading.close()
|
||||
refreshLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.qrcode-action-card {
|
||||
position: relative;
|
||||
height: 150px;
|
||||
width: fit-content;
|
||||
min-width: 150px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
background: var(--el-fill-color-blank);
|
||||
}
|
||||
|
||||
.qrcode-action-card__img {
|
||||
height: 150px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.qrcode-action-card__error {
|
||||
height: 150px;
|
||||
min-width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.qrcode-action-card__mask {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.qrcode-action-card:hover .qrcode-action-card__mask {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="100px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item :label="t('ErpStock.WarehouseArea.warehouseId')" prop="warehouseId">
|
||||
<el-select
|
||||
v-model="formData.warehouseId"
|
||||
:placeholder="t('ErpStock.WarehouseArea.placeholderWarehouseId')"
|
||||
class="!w-1/1"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warehouseList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseArea.areaCode')" prop="areaCode">
|
||||
<el-row :gutter="10" class="!w-full">
|
||||
<el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
|
||||
<el-input v-model="formData.areaCode" :placeholder="t('ErpStock.WarehouseArea.placeholderAreaCode')" :disabled="formData.isCode == true || formType === 'update'" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
|
||||
<div>
|
||||
<el-switch v-model="formData.isCode" :disabled="formType === 'update'" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseArea.areaName')" prop="areaName">
|
||||
<el-input v-model="formData.areaName" :placeholder="t('ErpStock.WarehouseArea.placeholderAreaName')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseArea.areaSize')" prop="areaSize">
|
||||
<el-input-number
|
||||
v-model="formData.areaSize"
|
||||
:placeholder="t('ErpStock.WarehouseArea.placeholderAreaSize')"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseArea.description')" prop="description">
|
||||
<el-input type="textarea" v-model="formData.description" :placeholder="t('ErpStock.WarehouseArea.placeholderDescription')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseArea.status')" prop="status">
|
||||
<el-switch v-model="formData.status" :active-value="CommonStatusEnum.ENABLE" :inactive-value="CommonStatusEnum.DISABLE" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
|
||||
<el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/erp/stock/warehousearea'
|
||||
import { WarehouseApi } from '@/api/erp/stock/warehouse'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
|
||||
defineOptions({ name: 'WarehouseAreaForm' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const formLoading = ref(false)
|
||||
const formType = ref('')
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
warehouseId: undefined,
|
||||
areaCode: undefined,
|
||||
areaName: undefined,
|
||||
areaSize: undefined,
|
||||
description: undefined,
|
||||
status: undefined,
|
||||
isCode: true
|
||||
})
|
||||
const formRules = reactive({
|
||||
warehouseId: [{ required: true, message: t('ErpStock.WarehouseArea.validatorWarehouseIdRequired'), trigger: 'blur' }],
|
||||
areaName: [{ required: true, message: t('ErpStock.WarehouseArea.validatorAreaNameRequired'), trigger: 'blur' }],
|
||||
status: [{ required: true, message: t('ErpStock.WarehouseArea.validatorStatusRequired'), trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref()
|
||||
const warehouseList = ref<any[]>([])
|
||||
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await WarehouseAreaApi.getWarehouseArea(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open })
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
const submitForm = async () => {
|
||||
await formRef.value.validate()
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = { ...formData.value } as unknown as WarehouseAreaVO
|
||||
if (data.isCode) {
|
||||
data.areaCode = undefined
|
||||
}
|
||||
if (formType.value === 'create') {
|
||||
await WarehouseAreaApi.createWarehouseArea(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await WarehouseAreaApi.updateWarehouseArea(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
warehouseId: undefined,
|
||||
areaCode: undefined,
|
||||
areaName: undefined,
|
||||
areaSize: undefined,
|
||||
description: undefined,
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
isCode: true
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
@ -1,213 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="auto"
|
||||
>
|
||||
<el-form-item :label="t('ErpStock.WarehouseArea.warehouseId')" prop="warehouseId">
|
||||
<el-select
|
||||
v-model="queryParams.warehouseId"
|
||||
:placeholder="t('ErpStock.WarehouseArea.placeholderWarehouseId')"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warehouseList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseArea.areaCode')" prop="areaCode">
|
||||
<el-input
|
||||
v-model="queryParams.areaCode"
|
||||
:placeholder="t('ErpStock.WarehouseArea.placeholderAreaCode')"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseArea.areaName')" prop="areaName">
|
||||
<el-input
|
||||
v-model="queryParams.areaName"
|
||||
:placeholder="t('ErpStock.WarehouseArea.placeholderAreaName')"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseArea.status')" prop="status" v-show="showAllFilters">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
:placeholder="t('ErpStock.WarehouseArea.placeholderStatus')"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="filterCount > 3">
|
||||
<el-button type="text" class="text-primary" @click="toggleFilters">
|
||||
<Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
|
||||
{{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
|
||||
t('FactoryModeling.FactoryStructure.expandText') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['erp:warehouse-area:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<ContentWrap>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
row-key="id"
|
||||
>
|
||||
<el-table-column :label="t('ErpStock.WarehouseArea.warehouseId')" align="center" prop="warehouseId" sortable>
|
||||
<template #default="scope">
|
||||
{{ getWarehouseName(scope.row.warehouseId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.WarehouseArea.areaCode')" align="center" prop="areaCode" sortable />
|
||||
<el-table-column :label="t('ErpStock.WarehouseArea.areaName')" align="center" prop="areaName" sortable />
|
||||
<el-table-column :label="t('ErpStock.WarehouseArea.areaSize')" align="center" prop="areaSize" />
|
||||
<el-table-column :label="t('ErpStock.WarehouseArea.description')" align="center" prop="description" />
|
||||
<el-table-column :label="t('ErpStock.WarehouseArea.status')" align="center" prop="status" sortable>
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.WarehouseArea.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable />
|
||||
<el-table-column :label="t('common.operate')" align="center">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['erp:warehouse-area:update']"
|
||||
>
|
||||
{{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['erp:warehouse-area:delete']"
|
||||
>
|
||||
{{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<WarehouseAreaForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { WarehouseAreaApi, WarehouseAreaVO } from '@/api/erp/stock/warehousearea'
|
||||
import { WarehouseApi } from '@/api/erp/stock/warehouse'
|
||||
import WarehouseAreaForm from './WarehouseAreaForm.vue'
|
||||
|
||||
defineOptions({ name: 'ErpWarehouseArea' })
|
||||
|
||||
const message = useMessage()
|
||||
const { t } = useI18n()
|
||||
|
||||
const loading = ref(true)
|
||||
const list = ref<WarehouseAreaVO[]>([])
|
||||
const total = ref(0)
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
warehouseId: undefined,
|
||||
areaCode: undefined,
|
||||
areaName: undefined,
|
||||
status: undefined
|
||||
})
|
||||
const queryFormRef = ref()
|
||||
const showAllFilters = ref(false)
|
||||
const filterCount = 4
|
||||
const toggleFilters = () => {
|
||||
showAllFilters.value = !showAllFilters.value
|
||||
}
|
||||
const warehouseList = ref<any[]>([])
|
||||
|
||||
const getWarehouseName = (warehouseId: number) => {
|
||||
return warehouseList.value.find((w) => w.id === warehouseId)?.name ?? '-'
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await WarehouseAreaApi.getWarehouseAreaPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getWarehouseList = async () => {
|
||||
warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
await message.delConfirm()
|
||||
await WarehouseAreaApi.deleteWarehouseArea(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getWarehouseList()
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
@ -1,227 +0,0 @@
|
||||
<template>
|
||||
<Dialog :title="dialogTitle" v-model="dialogVisible">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
label-width="120px"
|
||||
v-loading="formLoading"
|
||||
>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
|
||||
<el-select
|
||||
v-model="formData.warehouseId"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
|
||||
class="!w-1/1"
|
||||
@change="handleWarehouseChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warehouseList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
|
||||
<el-select
|
||||
v-model="formData.areaId"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
|
||||
class="!w-1/1"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in filteredAreaList"
|
||||
:key="item.id"
|
||||
:label="item.areaName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
|
||||
<el-row :gutter="10" class="!w-full">
|
||||
<el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
|
||||
<el-input v-model="formData.code" :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')" :disabled="formData.isCode == true || formType === 'update'" />
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
|
||||
<div>
|
||||
<el-switch v-model="formData.isCode" :disabled="formType === 'update'" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name">
|
||||
<el-input v-model="formData.name" :placeholder="t('ErpStock.WarehouseLocation.placeholderName')" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.areaSize')" prop="areaSize">
|
||||
<el-input-number
|
||||
v-model="formData.areaSize"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderAreaSize')"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" prop="maxLoadWeight">
|
||||
<el-input-number
|
||||
v-model="formData.maxLoadWeight"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderMaxLoadWeight')"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.positionX')" prop="positionX">
|
||||
<el-input-number
|
||||
v-model="formData.positionX"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderPositionX')"
|
||||
:precision="0"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.positionY')" prop="positionY">
|
||||
<el-input-number
|
||||
v-model="formData.positionY"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderPositionY')"
|
||||
:precision="0"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.positionZ')" prop="positionZ">
|
||||
<el-input-number
|
||||
v-model="formData.positionZ"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderPositionZ')"
|
||||
:precision="0"
|
||||
class="!w-1/1"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.allowProductMix')" prop="allowProductMix">
|
||||
<el-switch v-model="formData.allowProductMix" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.allowBatchMix')" prop="allowBatchMix">
|
||||
<el-switch v-model="formData.allowBatchMix" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status">
|
||||
<el-switch v-model="formData.status" :active-value="CommonStatusEnum.ENABLE" :inactive-value="CommonStatusEnum.DISABLE" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
|
||||
<el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { WarehouseLocationApi, WarehouseLocationVO } from '@/api/erp/stock/warehouselocation'
|
||||
import { WarehouseApi } from '@/api/erp/stock/warehouse'
|
||||
import { WarehouseAreaApi } from '@/api/erp/stock/warehousearea'
|
||||
import { CommonStatusEnum } from '@/utils/constants'
|
||||
|
||||
defineOptions({ name: 'WarehouseLocationForm' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('')
|
||||
const formLoading = ref(false)
|
||||
const formType = ref('')
|
||||
const formData = ref({
|
||||
id: undefined,
|
||||
warehouseId: undefined,
|
||||
areaId: undefined,
|
||||
code: undefined,
|
||||
name: undefined,
|
||||
areaSize: undefined,
|
||||
maxLoadWeight: undefined,
|
||||
positionX: undefined,
|
||||
positionY: undefined,
|
||||
positionZ: undefined,
|
||||
allowProductMix: false,
|
||||
allowBatchMix: false,
|
||||
status: undefined,
|
||||
isCode: true
|
||||
})
|
||||
const formRules = reactive({
|
||||
warehouseId: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorWarehouseIdRequired'), trigger: 'blur' }],
|
||||
areaId: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorAreaIdRequired'), trigger: 'blur' }],
|
||||
name: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorNameRequired'), trigger: 'blur' }],
|
||||
allowProductMix: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorAllowProductMixRequired'), trigger: 'blur' }],
|
||||
allowBatchMix: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorAllowBatchMixRequired'), trigger: 'blur' }],
|
||||
status: [{ required: true, message: t('ErpStock.WarehouseLocation.validatorStatusRequired'), trigger: 'blur' }]
|
||||
})
|
||||
const formRef = ref()
|
||||
const warehouseList = ref<any[]>([])
|
||||
const areaList = ref<any[]>([])
|
||||
|
||||
const filteredAreaList = computed(() => {
|
||||
if (!formData.value.warehouseId) return areaList.value
|
||||
return areaList.value.filter((item) => item.warehouseId === formData.value.warehouseId)
|
||||
})
|
||||
|
||||
const handleWarehouseChange = () => {
|
||||
formData.value.areaId = undefined
|
||||
}
|
||||
|
||||
const open = async (type: string, id?: number) => {
|
||||
dialogVisible.value = true
|
||||
dialogTitle.value = t('action.' + type)
|
||||
formType.value = type
|
||||
resetForm()
|
||||
warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
|
||||
const areaData = await WarehouseAreaApi.getWarehouseAreaPage({ pageNo: 1, pageSize: 100 })
|
||||
areaList.value = areaData.list ?? []
|
||||
if (id) {
|
||||
formLoading.value = true
|
||||
try {
|
||||
formData.value = await WarehouseLocationApi.getWarehouseLocation(id)
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
defineExpose({ open })
|
||||
|
||||
const emit = defineEmits(['success'])
|
||||
const submitForm = async () => {
|
||||
await formRef.value.validate()
|
||||
formLoading.value = true
|
||||
try {
|
||||
const data = { ...formData.value } as unknown as WarehouseLocationVO
|
||||
if (data.isCode) {
|
||||
data.code = undefined
|
||||
}
|
||||
if (formType.value === 'create') {
|
||||
await WarehouseLocationApi.createWarehouseLocation(data)
|
||||
message.success(t('common.createSuccess'))
|
||||
} else {
|
||||
await WarehouseLocationApi.updateWarehouseLocation(data)
|
||||
message.success(t('common.updateSuccess'))
|
||||
}
|
||||
dialogVisible.value = false
|
||||
emit('success')
|
||||
} finally {
|
||||
formLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
formData.value = {
|
||||
id: undefined,
|
||||
warehouseId: undefined,
|
||||
areaId: undefined,
|
||||
code: undefined,
|
||||
name: undefined,
|
||||
areaSize: undefined,
|
||||
maxLoadWeight: undefined,
|
||||
positionX: undefined,
|
||||
positionY: undefined,
|
||||
positionZ: undefined,
|
||||
allowProductMix: false,
|
||||
allowBatchMix: false,
|
||||
status: CommonStatusEnum.ENABLE,
|
||||
isCode: true
|
||||
}
|
||||
formRef.value?.resetFields()
|
||||
}
|
||||
</script>
|
||||
@ -1,275 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="auto"
|
||||
>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
|
||||
<el-select
|
||||
v-model="queryParams.warehouseId"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
@change="handleWarehouseChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in warehouseList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
|
||||
<el-select
|
||||
v-model="queryParams.areaId"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in filteredAreaList"
|
||||
:key="item.id"
|
||||
:label="item.areaName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
|
||||
<el-input
|
||||
v-model="queryParams.code"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderCode')"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name" v-show="showAllFilters">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderName')"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status" v-show="showAllFilters">
|
||||
<el-select
|
||||
v-model="queryParams.status"
|
||||
:placeholder="t('ErpStock.WarehouseLocation.placeholderStatus')"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="filterCount > 3">
|
||||
<el-button type="text" class="text-primary" @click="toggleFilters">
|
||||
<Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
|
||||
{{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
|
||||
t('FactoryModeling.FactoryStructure.expandText') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
v-hasPermi="['erp:warehouse-location:create']"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<ContentWrap>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="list"
|
||||
:stripe="true"
|
||||
:show-overflow-tooltip="true"
|
||||
row-key="id"
|
||||
>
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.warehouseId')" align="center" prop="warehouseId" sortable>
|
||||
<template #default="scope">
|
||||
{{ getWarehouseName(scope.row.warehouseId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.areaId')" align="center" prop="areaId" sortable>
|
||||
<template #default="scope">
|
||||
{{ getAreaName(scope.row.areaId) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.code')" align="center" prop="code" sortable />
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.name')" align="center" prop="name" sortable />
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.areaSize')" align="center" prop="areaSize" />
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" align="center" prop="maxLoadWeight" />
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.position')" align="center">
|
||||
<template #default="scope">
|
||||
{{ scope.row.positionX ?? '-' }}, {{ scope.row.positionY ?? '-' }}, {{ scope.row.positionZ ?? '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.allowProductMix')" align="center" prop="allowProductMix">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.allowProductMix ? 'success' : 'danger'" size="small">
|
||||
{{ scope.row.allowProductMix ? t('common.yes') : t('common.no') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.allowBatchMix')" align="center" prop="allowBatchMix">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.allowBatchMix ? 'success' : 'danger'" size="small">
|
||||
{{ scope.row.allowBatchMix ? t('common.yes') : t('common.no') }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.status')" align="center" prop="status" sortable>
|
||||
<template #default="scope">
|
||||
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('ErpStock.WarehouseLocation.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable />
|
||||
<el-table-column :label="t('common.operate')" align="center" width="150px">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
@click="openForm('update', scope.row.id)"
|
||||
v-hasPermi="['erp:warehouse-location:update']"
|
||||
>
|
||||
{{ t('action.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
link
|
||||
type="danger"
|
||||
@click="handleDelete(scope.row.id)"
|
||||
v-hasPermi="['erp:warehouse-location:delete']"
|
||||
>
|
||||
{{ t('action.del') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</ContentWrap>
|
||||
|
||||
<WarehouseLocationForm ref="formRef" @success="getList" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import { dateFormatter } from '@/utils/formatTime'
|
||||
import { WarehouseLocationApi, WarehouseLocationVO } from '@/api/erp/stock/warehouselocation'
|
||||
import { WarehouseApi } from '@/api/erp/stock/warehouse'
|
||||
import { WarehouseAreaApi } from '@/api/erp/stock/warehousearea'
|
||||
import WarehouseLocationForm from './WarehouseLocationForm.vue'
|
||||
|
||||
defineOptions({ name: 'ErpWarehouseLocation' })
|
||||
|
||||
const message = useMessage()
|
||||
const { t } = useI18n()
|
||||
|
||||
const loading = ref(true)
|
||||
const list = ref<WarehouseLocationVO[]>([])
|
||||
const total = ref(0)
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
warehouseId: undefined,
|
||||
areaId: undefined,
|
||||
code: undefined,
|
||||
name: undefined,
|
||||
status: undefined
|
||||
})
|
||||
const queryFormRef = ref()
|
||||
const showAllFilters = ref(false)
|
||||
const filterCount = 5
|
||||
const toggleFilters = () => {
|
||||
showAllFilters.value = !showAllFilters.value
|
||||
}
|
||||
const warehouseList = ref<any[]>([])
|
||||
const areaList = ref<any[]>([])
|
||||
|
||||
const filteredAreaList = computed(() => {
|
||||
if (!queryParams.warehouseId) return areaList.value
|
||||
return areaList.value.filter((item) => item.warehouseId === queryParams.warehouseId)
|
||||
})
|
||||
|
||||
const getWarehouseName = (warehouseId: number) => {
|
||||
return warehouseList.value.find((w) => w.id === warehouseId)?.name ?? '-'
|
||||
}
|
||||
|
||||
const getAreaName = (areaId: number) => {
|
||||
return areaList.value.find((a) => a.id === areaId)?.areaName ?? '-'
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const data = await WarehouseLocationApi.getWarehouseLocationPage(queryParams)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getWarehouseList = async () => {
|
||||
warehouseList.value = await WarehouseApi.getWarehouseSimpleList()
|
||||
}
|
||||
|
||||
const getAreaList = async () => {
|
||||
const data = await WarehouseAreaApi.getWarehouseAreaPage({ pageNo: 1, pageSize: 100 })
|
||||
areaList.value = data.list ?? []
|
||||
}
|
||||
|
||||
const handleWarehouseChange = () => {
|
||||
queryParams.areaId = undefined
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value.resetFields()
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
const formRef = ref()
|
||||
const openForm = (type: string, id?: number) => {
|
||||
formRef.value.open(type, id)
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
await message.delConfirm()
|
||||
await WarehouseLocationApi.deleteWarehouseLocation(id)
|
||||
message.success(t('common.delSuccess'))
|
||||
await getList()
|
||||
} catch {}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getWarehouseList()
|
||||
getAreaList()
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,277 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap class="timeline-panel">
|
||||
<div class="timeline-panel__header">
|
||||
<div class="timeline-panel__title">{{ t('DataCollection.RunOverview.timelineTitle') }}</div>
|
||||
<div class="timeline-panel__actions">
|
||||
<el-select model-value="" class="!w-140px">
|
||||
<el-option value="" :label="t('DataCollection.RunOverview.deviceFilterAll')" />
|
||||
</el-select>
|
||||
<el-select model-value="expand" class="!w-120px">
|
||||
<el-option value="expand" :label="t('DataCollection.RunOverview.expandAllText')" />
|
||||
</el-select>
|
||||
<el-button class="timeline-panel__icon-btn">
|
||||
<Icon icon="ep:data-analysis" />
|
||||
</el-button>
|
||||
<el-button class="timeline-panel__icon-btn">
|
||||
<Icon icon="ep:download" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-legend">
|
||||
<div v-for="item in legendItems" :key="item.status" class="timeline-legend__item">
|
||||
<span class="timeline-legend__dot" :style="{ background: item.color }"></span>
|
||||
<span>{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-table">
|
||||
<div class="timeline-table__head">
|
||||
<div class="timeline-table__meta">
|
||||
<div class="timeline-table__device">{{ t('DataCollection.RunOverview.tableDeviceNameColumn') }}</div>
|
||||
<div class="timeline-table__rate">{{ t('DataCollection.RunOverview.tableUtilizationRateColumn') }}</div>
|
||||
</div>
|
||||
<div class="timeline-scale">
|
||||
<div v-for="hour in hourTicks" :key="hour" class="timeline-scale__tick">
|
||||
{{ hour }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-for="row in timelineRows" :key="row.id" class="timeline-table__row">
|
||||
<div class="timeline-table__meta">
|
||||
<div class="timeline-table__device">{{ row.name }}</div>
|
||||
<div class="timeline-table__rate">{{ row.utilizationRate.toFixed(2) }}%</div>
|
||||
</div>
|
||||
<div class="timeline-track">
|
||||
<div v-for="hour in 24" :key="hour" class="timeline-track__hour"></div>
|
||||
<div
|
||||
v-for="(segment, index) in row.segments"
|
||||
:key="`${row.id}-${index}`"
|
||||
class="timeline-segment"
|
||||
:style="{
|
||||
left: `${(segment.startHour / 24) * 100}%`,
|
||||
width: `${((segment.endHour - segment.startHour) / 24) * 100}%`,
|
||||
background: statusColors[segment.status]
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="timeline-panel__footer">
|
||||
<div class="timeline-panel__summary">
|
||||
{{ t('DataCollection.RunOverview.statisticsTimeText', { start: statisticsStart, end: statisticsEnd }) }}
|
||||
</div>
|
||||
<div class="timeline-panel__pager">
|
||||
<span>{{ t('DataCollection.RunOverview.totalDevicesText', { total }) }}</span>
|
||||
<el-select :model-value="pageSize" class="!w-100px" @update:model-value="emit('update:pageSize', Number($event))">
|
||||
<el-option :value="10" :label="`10${t('DataCollection.RunOverview.pageUnit')}`" />
|
||||
<el-option :value="20" :label="`20${t('DataCollection.RunOverview.pageUnit')}`" />
|
||||
</el-select>
|
||||
<el-pagination
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:current-page="pageNo"
|
||||
:total="total"
|
||||
small
|
||||
@current-change="emit('update:pageNo', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { DeviceTimelineRow, RunStatus } from './types'
|
||||
|
||||
const props = defineProps<{
|
||||
rows: DeviceTimelineRow[]
|
||||
total: number
|
||||
pageNo: number
|
||||
pageSize: number
|
||||
statisticsStart: string
|
||||
statisticsEnd: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:pageNo', value: number): void
|
||||
(e: 'update:pageSize', value: number): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const statusColors: Record<RunStatus, string> = {
|
||||
running: '#67c35b',
|
||||
standby: '#f5c243',
|
||||
fault: '#ff6b6b',
|
||||
offline: '#d5dae3'
|
||||
}
|
||||
|
||||
const legendItems = computed(() => [
|
||||
{ status: 'running' as const, color: statusColors.running, label: t('DataCollection.RunOverview.legend.running') },
|
||||
{ status: 'standby' as const, color: statusColors.standby, label: t('DataCollection.RunOverview.legend.standby') },
|
||||
{ status: 'fault' as const, color: statusColors.fault, label: t('DataCollection.RunOverview.legend.fault') },
|
||||
{ status: 'offline' as const, color: statusColors.offline, label: t('DataCollection.RunOverview.legend.offline') }
|
||||
])
|
||||
|
||||
const hourTicks = Array.from({ length: 24 }, (_, index) => `${String(index).padStart(2, '0')}:00`)
|
||||
|
||||
const timelineRows = computed(() =>
|
||||
props.rows.map((row) => ({
|
||||
...row,
|
||||
segments: (row.segments || []).filter(
|
||||
(segment) =>
|
||||
!!statusColors[segment.status] &&
|
||||
Number.isFinite(segment.startHour) &&
|
||||
Number.isFinite(segment.endHour) &&
|
||||
segment.endHour > segment.startHour
|
||||
)
|
||||
}))
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.timeline-panel__header,
|
||||
.timeline-panel__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.timeline-panel__title {
|
||||
color: #101828;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.timeline-panel__actions,
|
||||
.timeline-panel__pager {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.timeline-panel__icon-btn {
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.timeline-legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
margin: 10px 0 18px;
|
||||
}
|
||||
|
||||
.timeline-legend__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #475467;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.timeline-legend__dot {
|
||||
width: 18px;
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.timeline-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.timeline-table__head,
|
||||
.timeline-table__row {
|
||||
display: grid;
|
||||
grid-template-columns: 210px minmax(720px, 1fr);
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.timeline-table__head {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.timeline-table__row {
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.timeline-table__meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 70px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.timeline-table__device,
|
||||
.timeline-table__rate {
|
||||
color: #344054;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.timeline-table__head .timeline-table__device,
|
||||
.timeline-table__head .timeline-table__rate {
|
||||
color: #475467;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.timeline-scale,
|
||||
.timeline-track {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(24, 1fr);
|
||||
}
|
||||
|
||||
.timeline-scale {
|
||||
color: #667085;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.timeline-scale__tick {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-scale__tick::after {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 12px;
|
||||
background: #e4e7ec;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.timeline-track {
|
||||
height: 20px;
|
||||
border-radius: 999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timeline-track__hour {
|
||||
border-right: 1px solid #edf1f7;
|
||||
}
|
||||
|
||||
.timeline-segment {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.timeline-panel__summary {
|
||||
color: #667085;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.timeline-panel__header,
|
||||
.timeline-panel__footer {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,139 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap class="run-overview-filter">
|
||||
<el-form :model="modelValue" inline label-width="auto">
|
||||
<el-form-item :label="t('DataCollection.RunOverview.groupLabel')">
|
||||
<el-tree-select
|
||||
:model-value="modelValue.groupId"
|
||||
:data="groupOptions"
|
||||
:props="treeProps"
|
||||
check-strictly
|
||||
clearable
|
||||
default-expand-all
|
||||
class="!w-220px"
|
||||
:placeholder="t('DataCollection.RunOverview.groupPlaceholder')"
|
||||
@update:model-value="handleGroupChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('DataCollection.RunOverview.deviceLabel')">
|
||||
<el-select
|
||||
:model-value="modelValue.deviceId"
|
||||
multiple
|
||||
collapse-tags
|
||||
collapse-tags-tooltip
|
||||
clearable
|
||||
:placeholder="t('DataCollection.RunOverview.devicePlaceholder')"
|
||||
class="!w-240px"
|
||||
@update:model-value="updateField('deviceId', $event || [])"
|
||||
>
|
||||
<el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('DataCollection.RunOverview.timeRangeLabel')">
|
||||
<el-date-picker
|
||||
:model-value="modelValue.timeRange"
|
||||
type="datetimerange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
:start-placeholder="t('DataCollection.RunOverview.timeRangeStartPlaceholder')"
|
||||
:end-placeholder="t('DataCollection.RunOverview.timeRangeEndPlaceholder')"
|
||||
class="!w-360px"
|
||||
@update:model-value="updateField('timeRange', $event)"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="run-overview-filter__actions">
|
||||
<el-button
|
||||
v-for="item in quickRanges"
|
||||
:key="item.value"
|
||||
:type="modelValue.quickRange === item.value ? 'primary' : 'default'"
|
||||
@click="emit('quick-range-change', item.value)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="emit('query')">
|
||||
<Icon icon="ep:search" class="mr-5px" />
|
||||
{{ t('DataCollection.RunOverview.searchButtonText') }}
|
||||
</el-button>
|
||||
<el-button @click="emit('reset')">
|
||||
<Icon icon="ep:refresh" class="mr-5px" />
|
||||
{{ t('DataCollection.RunOverview.resetButtonText') }}
|
||||
</el-button>
|
||||
<!-- <el-button type="success" plain @click="emit('export')">
|
||||
<Icon icon="ep:download" class="mr-5px" />
|
||||
{{ t('DataCollection.RunOverview.exportButtonText') }}
|
||||
</el-button>-->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type {
|
||||
OrganizationTreeOption,
|
||||
OverviewOption,
|
||||
QuickRangeKey,
|
||||
RunOverviewQueryParams
|
||||
} from './types'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: RunOverviewQueryParams
|
||||
groupOptions: OrganizationTreeOption[]
|
||||
deviceOptions: OverviewOption[]
|
||||
quickRanges: Array<{ label: string; value: QuickRangeKey }>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: RunOverviewQueryParams): void
|
||||
(e: 'query'): void
|
||||
(e: 'reset'): void
|
||||
(e: 'export'): void
|
||||
(e: 'quick-range-change', value: QuickRangeKey): void
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const treeProps = {
|
||||
value: 'id',
|
||||
label: 'name',
|
||||
children: 'children'
|
||||
}
|
||||
|
||||
const updateField = <K extends keyof RunOverviewQueryParams>(key: K, value: RunOverviewQueryParams[K]) => {
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
[key]: value
|
||||
})
|
||||
}
|
||||
|
||||
const handleGroupChange = (value: string | number | undefined) => {
|
||||
const nextGroupId = value == null ? '' : String(value)
|
||||
emit('update:modelValue', {
|
||||
...props.modelValue,
|
||||
groupId: nextGroupId,
|
||||
deviceId: props.modelValue.deviceId
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.run-overview-filter {
|
||||
:deep(.el-form) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px 0;
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
min-width: 84px;
|
||||
color: #475467;
|
||||
}
|
||||
}
|
||||
|
||||
.run-overview-filter__actions :deep(.el-button + .el-button) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<div class="metric-grid">
|
||||
<div v-for="item in metrics" :key="item.key" class="metric-card">
|
||||
<div class="metric-card__icon" :style="{ background: itemColors[item.key]?.bg, color: itemColors[item.key]?.fg }">
|
||||
<Icon :icon="item.icon" />
|
||||
</div>
|
||||
<div class="metric-card__content">
|
||||
<div class="metric-card__title">{{ t(`DataCollection.RunOverview.metrics.${item.key}`) }}</div>
|
||||
<div class="metric-card__value">
|
||||
{{ item.value.toFixed(2) }}<span>{{ item.unit }}</span>
|
||||
</div>
|
||||
<div class="metric-card__compare">
|
||||
<span>{{ t('DataCollection.RunOverview.compareLabel') }}</span>
|
||||
<span :class="item.change >= 0 ? 'is-up' : 'is-down'">
|
||||
{{ item.change >= 0 ? '↑' : '↓' }} {{ Math.abs(item.change).toFixed(2) }}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { RunOverviewMetric } from './types'
|
||||
|
||||
defineProps<{
|
||||
metrics: RunOverviewMetric[]
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const itemColors: Record<string, { bg: string; fg: string }> = {
|
||||
utilizationRate: { bg: 'rgba(61, 132, 255, 0.12)', fg: '#3d84ff' },
|
||||
powerOnRate: { bg: 'rgba(86, 196, 94, 0.12)', fg: '#56c45e' },
|
||||
faultRate: { bg: 'rgba(255, 164, 54, 0.12)', fg: '#ffa436' },
|
||||
standbyRate: { bg: 'rgba(156, 108, 255, 0.12)', fg: '#9c6cff' }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.metric-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 104px;
|
||||
padding: 22px 24px;
|
||||
background: #fff;
|
||||
border: 1px solid #edf1f7;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.metric-card__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-right: 18px;
|
||||
font-size: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.metric-card__content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.metric-card__title {
|
||||
margin-bottom: 6px;
|
||||
color: #475467;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.metric-card__value {
|
||||
color: #101828;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
|
||||
span {
|
||||
margin-left: 2px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.metric-card__compare {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
color: #667085;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.is-up {
|
||||
color: #f04438;
|
||||
}
|
||||
|
||||
.is-down {
|
||||
color: #12b76a;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.metric-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,271 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap class="chart-panel">
|
||||
<div class="chart-panel__header">
|
||||
<div class="chart-panel__title">
|
||||
{{ t('DataCollection.RunOverview.statusDistributionTitle') }}
|
||||
</div>
|
||||
<div class="chart-panel__actions">
|
||||
<el-select model-value="hour" class="!w-120px">
|
||||
<el-option value="hour" :label="t('DataCollection.RunOverview.granularityHour')" />
|
||||
</el-select>
|
||||
<el-button class="chart-panel__icon-btn">
|
||||
<Icon icon="ep:data-analysis" />
|
||||
</el-button>
|
||||
<el-button class="chart-panel__icon-btn">
|
||||
<Icon icon="ep:download" />
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-panel__body">
|
||||
<div class="chart-panel__main">
|
||||
<Echart :options="barOption" height="320px" />
|
||||
</div>
|
||||
<div class="chart-panel__side">
|
||||
<div class="chart-panel__side-title">{{ t('DataCollection.RunOverview.summaryTitle') }}</div>
|
||||
<div class="chart-panel__summary-layout">
|
||||
<!-- <div class="chart-panel__pie">
|
||||
<Echart :options="pieOption" height="280px" />
|
||||
</div>–>-->
|
||||
<Echart :options="pieOption" height="280px" />
|
||||
<div class="chart-panel__legend">
|
||||
<div v-for="item in summary" :key="item.status" class="chart-panel__legend-item">
|
||||
<span class="dot" :style="{ background: statusColors[item.status] }"></span>
|
||||
<span class="label">{{ statusLabelMap[item.status] }}</span>
|
||||
<span class="value">{{ item.percent.toFixed(2) }}% ({{ item.hours.toFixed(2) }}h)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import type { EChartsOption } from 'echarts'
|
||||
import { Echart as EchartChart } from '@/components/Echart'
|
||||
import type { HourlyStatusItem, RunStatus, StatusSummaryItem } from './types'
|
||||
|
||||
const Echart = EchartChart
|
||||
|
||||
const props = defineProps<{
|
||||
hourlyStatus: HourlyStatusItem[]
|
||||
summary: StatusSummaryItem[]
|
||||
summaryTotalHours?: number
|
||||
}>()
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const statusColors: Record<RunStatus, string> = {
|
||||
running: '#67c35b',
|
||||
standby: '#f5c243',
|
||||
fault: '#ff6b6b',
|
||||
offline: '#cfd4df'
|
||||
}
|
||||
|
||||
const statusLabelMap = computed<Record<RunStatus, string>>(() => ({
|
||||
running: t('DataCollection.RunOverview.legend.running'),
|
||||
standby: t('DataCollection.RunOverview.legend.standby'),
|
||||
fault: t('DataCollection.RunOverview.legend.fault'),
|
||||
offline: t('DataCollection.RunOverview.legend.offline')
|
||||
}))
|
||||
|
||||
const barOption = computed<EChartsOption>(() => ({
|
||||
color: [
|
||||
statusColors.running,
|
||||
statusColors.standby,
|
||||
statusColors.fault,
|
||||
statusColors.offline
|
||||
],
|
||||
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
|
||||
legend: {
|
||||
top: 8,
|
||||
itemWidth: 14,
|
||||
itemHeight: 8,
|
||||
textStyle: { color: '#667085', fontSize: 12 }
|
||||
},
|
||||
grid: { left: 48, right: 18, top: 46, bottom: 36 },
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.hourlyStatus.map((item) => item.hour),
|
||||
axisTick: { show: false },
|
||||
axisLine: { lineStyle: { color: '#d0d5dd' } },
|
||||
axisLabel: { color: '#667085', fontSize: 11 }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: { color: '#667085', formatter: '{value}%' },
|
||||
splitLine: { lineStyle: { color: '#eef2f6' } }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: statusLabelMap.value.running,
|
||||
type: 'bar',
|
||||
stack: 'status',
|
||||
barWidth: 18,
|
||||
data: props.hourlyStatus.map((item) => item.running)
|
||||
},
|
||||
{
|
||||
name: statusLabelMap.value.standby,
|
||||
type: 'bar',
|
||||
stack: 'status',
|
||||
barWidth: 18,
|
||||
data: props.hourlyStatus.map((item) => item.standby)
|
||||
},
|
||||
{
|
||||
name: statusLabelMap.value.fault,
|
||||
type: 'bar',
|
||||
stack: 'status',
|
||||
barWidth: 18,
|
||||
data: props.hourlyStatus.map((item) => item.fault)
|
||||
},
|
||||
{
|
||||
name: statusLabelMap.value.offline,
|
||||
type: 'bar',
|
||||
stack: 'status',
|
||||
barWidth: 18,
|
||||
data: props.hourlyStatus.map((item) => item.offline)
|
||||
}
|
||||
]
|
||||
}))
|
||||
|
||||
const pieOption = computed<EChartsOption>(() => ({
|
||||
color: props.summary.map((item) => statusColors[item.status]),
|
||||
tooltip: { trigger: 'item', formatter: '{b}: {c}%' },
|
||||
graphic: [
|
||||
{
|
||||
type: 'text',
|
||||
left: 'center',
|
||||
top: '42%',
|
||||
style: {
|
||||
text: `${t('DataCollection.RunOverview.totalTimeLabel')}\n${(props.summaryTotalHours ?? 0).toFixed(2)} h`,
|
||||
textAlign: 'center',
|
||||
fill: '#101828',
|
||||
fontSize: 14,
|
||||
fontWeight: 600,
|
||||
lineHeight: 24
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: t('DataCollection.RunOverview.summaryTitle'),
|
||||
type: 'pie',
|
||||
radius: ['55%', '76%'],
|
||||
center: ['50%', '50%'],
|
||||
label: { show: false },
|
||||
data: props.summary.map((item) => ({
|
||||
name: statusLabelMap.value[item.status],
|
||||
value: item.percent
|
||||
}))
|
||||
}
|
||||
]
|
||||
}))
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.chart-panel {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.chart-panel__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.chart-panel__title,
|
||||
.chart-panel__side-title {
|
||||
color: #101828;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.chart-panel__actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-panel__icon-btn {
|
||||
width: 36px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chart-panel__body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.chart-panel__side {
|
||||
padding: 8px 12px 0;
|
||||
}
|
||||
|
||||
.chart-panel__summary-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(180px, 220px) minmax(180px, 1fr);
|
||||
align-items: center;
|
||||
gap: 8px 16px;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.chart-panel__pie {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chart-panel__legend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chart-panel__legend-item {
|
||||
display: grid;
|
||||
grid-template-columns: 12px 52px 1fr;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
color: #344054;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #667085;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #101828;
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.chart-panel__body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.chart-panel__summary-layout {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.chart-panel__legend {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,75 +0,0 @@
|
||||
export type RunStatus = 'running' | 'standby' | 'fault' | 'offline'
|
||||
|
||||
export type QuickRangeKey = 'today' | 'yesterday' | 'last7Days' | 'last30Days'
|
||||
|
||||
export interface OverviewOption {
|
||||
label: string
|
||||
value: string
|
||||
}
|
||||
|
||||
export interface OrganizationFilterItem {
|
||||
id: number | string
|
||||
name: string
|
||||
parentId?: number | string | null
|
||||
dvId?: number | string | null
|
||||
machineName?: string
|
||||
}
|
||||
|
||||
export interface OrganizationTreeOption {
|
||||
id: number | string
|
||||
name: string
|
||||
parentId?: number | string | null
|
||||
dvId?: number | string | null
|
||||
children?: OrganizationTreeOption[]
|
||||
}
|
||||
|
||||
export interface RunOverviewQueryParams {
|
||||
groupId: string
|
||||
deviceId: string[]
|
||||
quickRange: QuickRangeKey
|
||||
timeRange: [string, string]
|
||||
}
|
||||
|
||||
export interface RunOverviewMetric {
|
||||
key: string
|
||||
icon: string
|
||||
value: number
|
||||
unit: string
|
||||
change: number
|
||||
}
|
||||
|
||||
export interface HourlyStatusItem {
|
||||
hour: string
|
||||
running: number
|
||||
standby: number
|
||||
fault: number
|
||||
offline: number
|
||||
}
|
||||
|
||||
export interface StatusSummaryItem {
|
||||
status: RunStatus
|
||||
percent: number
|
||||
hours: number
|
||||
}
|
||||
|
||||
export interface TimelineSegment {
|
||||
status: RunStatus
|
||||
startHour: number
|
||||
endHour: number
|
||||
}
|
||||
|
||||
export interface DeviceTimelineRow {
|
||||
id: string
|
||||
name: string
|
||||
utilizationRate: number
|
||||
segments: TimelineSegment[]
|
||||
}
|
||||
|
||||
export interface RunOverviewData {
|
||||
metrics: RunOverviewMetric[]
|
||||
hourlyStatus: HourlyStatusItem[]
|
||||
summary: StatusSummaryItem[]
|
||||
summaryTotalHours: number
|
||||
timelineRows: DeviceTimelineRow[]
|
||||
totalDevices: number
|
||||
}
|
||||
@ -1,312 +0,0 @@
|
||||
<template>
|
||||
<div ref="fullscreenTargetRef" class="run-overview-page" :class="{ 'is-fullscreen': isFullscreen }">
|
||||
<div class="run-overview-page__floating-tools">
|
||||
<el-tooltip
|
||||
:content="
|
||||
isFullscreen
|
||||
? t('DataCollection.RunOverview.exitFullscreen')
|
||||
: t('DataCollection.RunOverview.enterFullscreen')
|
||||
"
|
||||
>
|
||||
<button class="run-overview-page__screenfull" type="button" @click="toggleFullscreen">
|
||||
<Icon :icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'" color="#344054" />
|
||||
</button>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<OverviewFilterBar
|
||||
v-model="queryParams"
|
||||
:group-options="groupOptions"
|
||||
:device-options="deviceOptions"
|
||||
:quick-ranges="quickRanges"
|
||||
@quick-range-change="handleQuickRangeChange"
|
||||
@query="handleQuery"
|
||||
@reset="resetQuery"
|
||||
/>
|
||||
|
||||
<OverviewMetricCards :metrics="overviewData.metrics" />
|
||||
|
||||
<StatusDistributionChart
|
||||
:hourly-status="overviewData.hourlyStatus"
|
||||
:summary="overviewData.summary"
|
||||
:summary-total-hours="overviewData.summaryTotalHours"
|
||||
/>
|
||||
|
||||
<OperationTimelineChart
|
||||
:rows="overviewData.timelineRows"
|
||||
:total="overviewData.totalDevices"
|
||||
:page-no="pageNo"
|
||||
:page-size="pageSize"
|
||||
:statistics-start="queryParams.timeRange[0]"
|
||||
:statistics-end="queryParams.timeRange[1]"
|
||||
@update:page-no="pageNo = $event"
|
||||
@update:page-size="handlePageSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import dayjs from 'dayjs'
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
import { DeviceOperationOverviewApi } from '@/api/iot/deviceOperationOverview'
|
||||
import { OrganizationApi } from '@/api/mes/organization'
|
||||
import { handleTree } from '@/utils/tree'
|
||||
import OverviewFilterBar from './components/OverviewFilterBar.vue'
|
||||
import OverviewMetricCards from './components/OverviewMetricCards.vue'
|
||||
import OperationTimelineChart from './components/OperationTimelineChart.vue'
|
||||
import StatusDistributionChart from './components/StatusDistributionChart.vue'
|
||||
import { buildDefaultQueryParams } from './mock'
|
||||
import type {
|
||||
OrganizationFilterItem,
|
||||
OrganizationTreeOption,
|
||||
OverviewOption,
|
||||
QuickRangeKey,
|
||||
RunOverviewData,
|
||||
RunOverviewQueryParams
|
||||
} from './components/types'
|
||||
|
||||
defineOptions({ name: 'IotRunOverview' })
|
||||
|
||||
const { t } = useI18n()
|
||||
const message = useMessage()
|
||||
const fullscreenTargetRef = ref()
|
||||
const { isFullscreen, toggle: toggleFullscreen } = useFullscreen(fullscreenTargetRef)
|
||||
const organizationList = ref<OrganizationFilterItem[]>([])
|
||||
const groupOptions = ref<OrganizationTreeOption[]>([])
|
||||
|
||||
const createDateRangeByQuickKey = (key: QuickRangeKey): [string, string] => {
|
||||
const format = 'YYYY-MM-DD HH:mm:ss'
|
||||
if (key === 'today') return [dayjs().startOf('day').format(format), dayjs().endOf('day').format(format)]
|
||||
if (key === 'yesterday') {
|
||||
return [
|
||||
dayjs().subtract(1, 'day').startOf('day').format(format),
|
||||
dayjs().subtract(1, 'day').endOf('day').format(format)
|
||||
]
|
||||
}
|
||||
if (key === 'last7Days') return [dayjs().subtract(6, 'day').startOf('day').format(format), dayjs().endOf('day').format(format)]
|
||||
if (key === 'last30Days') {
|
||||
return [dayjs().subtract(29, 'day').startOf('day').format(format), dayjs().endOf('day').format(format)]
|
||||
}
|
||||
return [dayjs().startOf('day').format(format), dayjs().endOf('day').format(format)]
|
||||
}
|
||||
|
||||
const quickRanges = computed(() => [
|
||||
{ label: t('DataCollection.RunOverview.quickRange.today'), value: 'today' as const },
|
||||
{ label: t('DataCollection.RunOverview.quickRange.yesterday'), value: 'yesterday' as const },
|
||||
{ label: t('DataCollection.RunOverview.quickRange.last7Days'), value: 'last7Days' as const },
|
||||
{ label: t('DataCollection.RunOverview.quickRange.last30Days'), value: 'last30Days' as const },
|
||||
/* { label: t('DataCollection.RunOverview.quickRange.custom'), value: 'custom' as const }*/
|
||||
])
|
||||
|
||||
const queryParams = ref<RunOverviewQueryParams>(buildDefaultQueryParams())
|
||||
const pageNo = ref(1)
|
||||
const pageSize = ref(10)
|
||||
|
||||
const organizationMap = computed(() => {
|
||||
return organizationList.value.reduce<Record<string, OrganizationFilterItem>>((acc, item) => {
|
||||
acc[String(item.id)] = item
|
||||
return acc
|
||||
}, {})
|
||||
})
|
||||
|
||||
const childrenByParentId = computed(() => {
|
||||
return organizationList.value.reduce<Record<string, OrganizationFilterItem[]>>((acc, item) => {
|
||||
const parentKey = String(item.parentId ?? 0)
|
||||
if (!acc[parentKey]) acc[parentKey] = []
|
||||
acc[parentKey].push(item)
|
||||
return acc
|
||||
}, {})
|
||||
})
|
||||
|
||||
const collectDeviceOptionsByGroup = (groupId?: string) => {
|
||||
const deviceMap = new Map<string, OverviewOption>()
|
||||
const pushDevice = (node?: OrganizationFilterItem) => {
|
||||
if (!node?.dvId || !node.machineName?.trim()) return
|
||||
const deviceId = String(node.dvId)
|
||||
if (!deviceMap.has(deviceId)) {
|
||||
deviceMap.set(deviceId, {
|
||||
label: node.machineName.trim(),
|
||||
value: deviceId
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (!groupId) {
|
||||
organizationList.value.forEach(pushDevice)
|
||||
return Array.from(deviceMap.values())
|
||||
}
|
||||
|
||||
const queue = [groupId]
|
||||
while (queue.length > 0) {
|
||||
const currentId = queue.shift() as string
|
||||
pushDevice(organizationMap.value[currentId])
|
||||
const children = childrenByParentId.value[currentId] || []
|
||||
children.forEach((child) => queue.push(String(child.id)))
|
||||
}
|
||||
|
||||
return Array.from(deviceMap.values())
|
||||
}
|
||||
|
||||
const deviceOptions = computed(() => collectDeviceOptionsByGroup(queryParams.value.groupId))
|
||||
const overviewData = ref<RunOverviewData>({
|
||||
metrics: [],
|
||||
hourlyStatus: [],
|
||||
summary: [],
|
||||
summaryTotalHours: 0,
|
||||
timelineRows: [],
|
||||
totalDevices: 0
|
||||
})
|
||||
|
||||
const currentDeviceIds = computed(() =>
|
||||
queryParams.value.deviceId.length > 0 ? queryParams.value.deviceId : deviceOptions.value.map((item) => item.value)
|
||||
)
|
||||
|
||||
const buildOverviewRequestParams = () => ({
|
||||
ids: currentDeviceIds.value.join(','),
|
||||
startTime: queryParams.value.timeRange[0],
|
||||
endTime: queryParams.value.timeRange[1],
|
||||
timelinePageNo: pageNo.value,
|
||||
timelinePageSize: pageSize.value
|
||||
})
|
||||
|
||||
const refreshData = async () => {
|
||||
const response = await DeviceOperationOverviewApi.getRunOverview(buildOverviewRequestParams())
|
||||
overviewData.value = {
|
||||
metrics: response?.metrics || [],
|
||||
hourlyStatus: response?.hourlyStatus || [],
|
||||
summary: response?.summary || [],
|
||||
summaryTotalHours: response?.summaryTotalHours || 0,
|
||||
timelineRows: response?.timelineRows || [],
|
||||
totalDevices: response?.totalDevices || 0
|
||||
}
|
||||
const maxPage = Math.max(1, Math.ceil(overviewData.value.totalDevices / pageSize.value))
|
||||
if (pageNo.value > maxPage) pageNo.value = maxPage
|
||||
}
|
||||
|
||||
const resetToFirstPageAndRefresh = () => {
|
||||
if (pageNo.value !== 1) {
|
||||
pageNo.value = 1
|
||||
return
|
||||
}
|
||||
void refreshData()
|
||||
}
|
||||
|
||||
const handleQuickRangeChange = (key: QuickRangeKey) => {
|
||||
queryParams.value = {
|
||||
...queryParams.value,
|
||||
quickRange: key,
|
||||
timeRange: createDateRangeByQuickKey(key)
|
||||
}
|
||||
pageNo.value = 1
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
resetToFirstPageAndRefresh()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryParams.value = buildDefaultQueryParams()
|
||||
pageSize.value = 10
|
||||
resetToFirstPageAndRefresh()
|
||||
}
|
||||
|
||||
const handleExport = () => {
|
||||
message.success(t('DataCollection.RunOverview.exportPlaceholderMessage'))
|
||||
}
|
||||
|
||||
const handlePageSizeChange = (size: number) => {
|
||||
pageSize.value = size
|
||||
pageNo.value = 1
|
||||
void refreshData()
|
||||
}
|
||||
|
||||
watch(pageNo, () => {
|
||||
void refreshData()
|
||||
})
|
||||
|
||||
const getOrganizationOptions = async () => {
|
||||
const data = await OrganizationApi.getOrganizationList()
|
||||
organizationList.value = Array.isArray(data)
|
||||
? data.map((item) => ({
|
||||
id: String(item.id),
|
||||
name: item.name,
|
||||
parentId: item.parentId != null ? String(item.parentId) : item.parentId,
|
||||
dvId: item.dvId,
|
||||
machineName: item.machineName
|
||||
}))
|
||||
: []
|
||||
groupOptions.value = handleTree(
|
||||
organizationList.value.map((item) => ({ ...item })),
|
||||
'id',
|
||||
'parentId'
|
||||
) as OrganizationTreeOption[]
|
||||
}
|
||||
|
||||
watch(
|
||||
deviceOptions,
|
||||
(options) => {
|
||||
if (queryParams.value.deviceId.length === 0) return
|
||||
const validDeviceIds = queryParams.value.deviceId.filter((deviceId) =>
|
||||
options.some((item) => item.value === deviceId)
|
||||
)
|
||||
if (validDeviceIds.length !== queryParams.value.deviceId.length) {
|
||||
queryParams.value = {
|
||||
...queryParams.value,
|
||||
deviceId: validDeviceIds
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
await getOrganizationOptions()
|
||||
await refreshData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.run-overview-page {
|
||||
position: relative;
|
||||
min-width: 0;
|
||||
//padding-top: 8px;
|
||||
}
|
||||
|
||||
.run-overview-page.is-fullscreen {
|
||||
height: 100%;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.run-overview-page__floating-tools {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 12px;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.run-overview-page__screenfull {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
border: 1px solid #e4e7ec;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.run-overview-page__screenfull:hover {
|
||||
background: #f8fbff;
|
||||
border-color: #bfd3ff;
|
||||
box-shadow: 0 8px 18px rgba(61, 132, 255, 0.12);
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +0,0 @@
|
||||
import dayjs from 'dayjs'
|
||||
import type { RunOverviewQueryParams } from './components/types'
|
||||
|
||||
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
|
||||
|
||||
export const buildDefaultQueryParams = (): RunOverviewQueryParams => {
|
||||
const start = dayjs().startOf('day')
|
||||
const end = dayjs().endOf('day')
|
||||
return {
|
||||
groupId: '',
|
||||
deviceId: [],
|
||||
quickRange: 'today',
|
||||
timeRange: [start.format(DATE_TIME_FORMAT), end.format(DATE_TIME_FORMAT)]
|
||||
}
|
||||
}
|
||||
@ -1,174 +0,0 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogVisible" :title="dialogTitle" width="1300" :scroll="true" max-height="70vh" align-center>
|
||||
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="auto">
|
||||
<el-form-item :label="t('EquipmentManagement.CapacityReport.dialogProductCode')" prop="productCode">
|
||||
<el-input
|
||||
v-model="queryParams.productCode"
|
||||
:placeholder="t('EquipmentManagement.CapacityReport.dialogProductCodePlaceholder')"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('EquipmentManagement.CapacityReport.dialogProductName')" prop="productName">
|
||||
<el-input
|
||||
v-model="queryParams.productName"
|
||||
:placeholder="t('EquipmentManagement.CapacityReport.dialogProductNamePlaceholder')"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('EquipmentManagement.CapacityReport.dialogBaogongTime')" prop="baogongTime">
|
||||
<el-date-picker v-model="baogongTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||||
:start-placeholder="t('EquipmentManagement.CapacityReport.dialogBaogongTimeStart')"
|
||||
:end-placeholder="t('EquipmentManagement.CapacityReport.dialogBaogongTimeEnd')"
|
||||
:shortcuts="baogongTimeShortcuts"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" />
|
||||
{{ t('EquipmentManagement.CapacityReport.dialogSearchButtonText') }}
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" />
|
||||
{{ t('EquipmentManagement.CapacityReport.dialogResetButtonText') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" style="margin-top: 16px">
|
||||
<el-table-column :label="t('EquipmentManagement.CapacityReport.dialogProductCode')" align="center" prop="productCode" />
|
||||
<el-table-column :label="t('EquipmentManagement.CapacityReport.dialogProductName')" align="center" prop="productName" />
|
||||
<el-table-column :label="t('EquipmentManagement.CapacityReport.dialogBaogongTotal')" align="center" prop="baogongTotal" />
|
||||
<el-table-column :label="t('EquipmentManagement.CapacityReport.dialogAvgCapacity')" align="center" prop="avgCapacity" />
|
||||
</el-table>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PlanApi } from '@/api/mes/plan'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
deviceId?: number
|
||||
deviceName?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}>()
|
||||
|
||||
const dialogVisible = computed({
|
||||
get() {
|
||||
return props.modelValue
|
||||
},
|
||||
set(value: boolean) {
|
||||
emit('update:modelValue', value)
|
||||
}
|
||||
})
|
||||
|
||||
const dialogTitle = computed(() => {
|
||||
const name = props.deviceName || '-'
|
||||
return `${t('EquipmentManagement.CapacityReport.dialogTitlePrefix')}${name}`
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const list = ref<any[]>([])
|
||||
const total = ref(0)
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
deviceId: undefined as number | undefined,
|
||||
productCode: undefined as string | undefined,
|
||||
productName: undefined as string | undefined,
|
||||
beginBaogongTime: undefined as string | undefined,
|
||||
endBaogongTime: undefined as string | undefined
|
||||
})
|
||||
const baogongTime = ref<[string, string]>(['', ''])
|
||||
const baogongTimeShortcuts = [
|
||||
{
|
||||
text: t('EquipmentManagement.CapacityReport.shortcutLastWeek'),
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setDate(start.getDate() - 7)
|
||||
return [start, end]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: t('EquipmentManagement.CapacityReport.shortcutLastHalfYear'),
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 6)
|
||||
return [start, end]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: t('EquipmentManagement.CapacityReport.shortcutLastYear'),
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setFullYear(start.getFullYear() - 1)
|
||||
return [start, end]
|
||||
}
|
||||
}
|
||||
]
|
||||
const queryFormRef = ref()
|
||||
|
||||
const getList = async () => {
|
||||
if (!props.deviceId) {
|
||||
list.value = []
|
||||
total.value = 0
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
...queryParams,
|
||||
beginBaogongTime: baogongTime.value?.[0] || undefined,
|
||||
endBaogongTime: baogongTime.value?.[1] || undefined
|
||||
}
|
||||
const data = await PlanApi.getProductCapacityPage(params)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields()
|
||||
baogongTime.value = ['', '']
|
||||
queryParams.deviceId = props.deviceId
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => [props.modelValue, props.deviceId],
|
||||
([visible, deviceId]) => {
|
||||
if (!visible) return
|
||||
queryParams.deviceId = deviceId as number
|
||||
queryParams.pageNo = 1
|
||||
queryParams.productCode = undefined
|
||||
queryParams.productName = undefined
|
||||
queryParams.taskCode = undefined
|
||||
getList()
|
||||
}
|
||||
)
|
||||
</script>
|
||||
@ -1,234 +0,0 @@
|
||||
<template>
|
||||
<ContentWrap>
|
||||
<!-- 搜索工作栏 -->
|
||||
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" min-label-width="80px">
|
||||
<el-form-item :label="t('EquipmentManagement.CapacityReport.deviceCode')" prop="deviceCode">
|
||||
<el-input v-model="queryParams.deviceCode"
|
||||
:placeholder="t('EquipmentManagement.CapacityReport.placeholderDeviceCode')" clearable
|
||||
@keyup.enter="handleQuery" class="!w-240px" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('EquipmentManagement.CapacityReport.deviceName')" prop="deviceName">
|
||||
<el-input v-model="queryParams.deviceName"
|
||||
:placeholder="t('EquipmentManagement.CapacityReport.placeholderDeviceName')" clearable
|
||||
@keyup.enter="handleQuery" class="!w-240px" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('EquipmentManagement.CapacityReport.baogongTime')" prop="baogongTime">
|
||||
<el-date-picker v-model="baogongTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
|
||||
:start-placeholder="t('EquipmentManagement.CapacityReport.placeholderBaogongTimeStart')"
|
||||
:end-placeholder="t('EquipmentManagement.CapacityReport.placeholderBaogongTimeEnd')"
|
||||
:shortcuts="baogongTimeShortcuts"
|
||||
:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="filterCount > 3">
|
||||
<el-button type="text" class="text-primary" @click="toggleFilters">
|
||||
<Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
|
||||
{{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
|
||||
t('FactoryModeling.FactoryStructure.expandText') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}
|
||||
</el-button>
|
||||
<el-button type="success" plain @click="handleExport" :loading="exportLoading">
|
||||
<Icon icon="ep:download" class="mr-5px" /> {{ t('EquipmentManagement.EquipmentLedger.export') }}
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 列表 -->
|
||||
<ContentWrap>
|
||||
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :row-key="(row) => row.id"
|
||||
@select-all="handleSelectAll" @select="handleSelect">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column :label="t('EquipmentManagement.CapacityReport.deviceCode')" align="center" prop="deviceCode"
|
||||
sortable />
|
||||
<el-table-column :label="t('EquipmentManagement.CapacityReport.deviceName')" align="center" prop="deviceName"
|
||||
sortable />
|
||||
<el-table-column :label="t('EquipmentManagement.CapacityReport.deviceType')" align="center" prop="typeName"
|
||||
sortable />
|
||||
<el-table-column :label="t('EquipmentManagement.CapacityReport.ratedCapacity')" align="center"
|
||||
prop="ratedCapacity" sortable />
|
||||
<el-table-column align="center" prop="reportCapacity">
|
||||
<template #header>
|
||||
<span>{{ t('EquipmentManagement.CapacityReport.reportCapacity') }}</span>
|
||||
<el-tooltip :content="t('EquipmentManagement.CapacityReport.reportCapacityTooltip')" placement="top">
|
||||
<Icon icon="ep:question-filled" class="ml-4px"
|
||||
style="vertical-align: middle; color: var(--el-text-color-secondary)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" @click="openProductCapacity(scope.row)">
|
||||
{{ t('EquipmentManagement.CapacityReport.reportCapacityViewDetail') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="actualCapacity" sortable>
|
||||
<template #header>
|
||||
<span>{{ t('EquipmentManagement.CapacityReport.actualCapacity') }}</span>
|
||||
<el-tooltip :content="t('EquipmentManagement.CapacityReport.actualCapacityTooltip')" placement="top">
|
||||
<Icon icon="ep:question-filled" class="ml-4px"
|
||||
style="vertical-align: middle; color: var(--el-text-color-secondary)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('EquipmentManagement.CapacityReport.workshop')" align="center" prop="workshopName"
|
||||
sortable />
|
||||
</el-table>
|
||||
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
|
||||
@pagination="getList" />
|
||||
</ContentWrap>
|
||||
|
||||
<ProductCapacityDialog v-model="productCapacityVisible" :device-id="productCapacityDeviceId"
|
||||
:device-name="productCapacityDeviceName" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import download from '@/utils/download'
|
||||
import { DeviceLedgerApi, CapacityReportVO } from '@/api/mes/device-ledger'
|
||||
import ProductCapacityDialog from './ProductCapacityDialog.vue'
|
||||
|
||||
defineOptions({ name: 'CapacityReport' })
|
||||
|
||||
const message = useMessage()
|
||||
const { t } = useI18n()
|
||||
|
||||
const loading = ref(true)
|
||||
const list = ref<CapacityReportVO[]>([])
|
||||
const total = ref(0)
|
||||
const queryParams = reactive({
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
deviceCode: undefined,
|
||||
deviceName: undefined,
|
||||
deviceType: undefined,
|
||||
workshop: undefined,
|
||||
beginTime: undefined,
|
||||
endTime: undefined
|
||||
})
|
||||
const baogongTime = ref<[string, string]>(['', ''])
|
||||
const queryFormRef = ref()
|
||||
const exportLoading = ref(false)
|
||||
const showAllFilters = ref(false)
|
||||
const filterCount = 3
|
||||
const selectedIds = ref<number[]>([])
|
||||
const productCapacityVisible = ref(false)
|
||||
const productCapacityDeviceId = ref<number>()
|
||||
const productCapacityDeviceName = ref<string>()
|
||||
|
||||
const baogongTimeShortcuts = [
|
||||
{
|
||||
text: t('EquipmentManagement.CapacityReport.shortcutLastWeek'),
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
return [start, end]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: t('EquipmentManagement.CapacityReport.shortcutLastHalfYear'),
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setMonth(start.getMonth() - 6)
|
||||
return [start, end]
|
||||
}
|
||||
},
|
||||
{
|
||||
text: t('EquipmentManagement.CapacityReport.shortcutLastYear'),
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setFullYear(start.getFullYear() - 1)
|
||||
return [start, end]
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const openProductCapacity = (row: CapacityReportVO) => {
|
||||
productCapacityDeviceId.value = row.id
|
||||
productCapacityDeviceName.value = row.deviceName
|
||||
productCapacityVisible.value = true
|
||||
}
|
||||
|
||||
/** 切换筛选框展开/折叠 */
|
||||
const toggleFilters = () => {
|
||||
showAllFilters.value = !showAllFilters.value
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
...queryParams,
|
||||
beginTime: baogongTime.value?.[0] || undefined,
|
||||
endTime: baogongTime.value?.[1] || undefined
|
||||
}
|
||||
const data = await DeviceLedgerApi.getCapacityReportPage(params)
|
||||
list.value = data.list
|
||||
total.value = data.total
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleQuery = () => {
|
||||
queryParams.pageNo = 1
|
||||
selectedIds.value = []
|
||||
getList()
|
||||
}
|
||||
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields()
|
||||
baogongTime.value = ['', '']
|
||||
selectedIds.value = []
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
const handleSelectAll = (val: boolean) => {
|
||||
if (val) {
|
||||
selectedIds.value = list.value.map(item => item.id)
|
||||
} else {
|
||||
selectedIds.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const handleSelect = (val: boolean, row: CapacityReportVO) => {
|
||||
if (val) {
|
||||
selectedIds.value.push(row.id)
|
||||
} else {
|
||||
const index = selectedIds.value.indexOf(row.id)
|
||||
if (index > -1) {
|
||||
selectedIds.value.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleExport = async () => {
|
||||
try {
|
||||
await message.exportConfirm()
|
||||
exportLoading.value = true
|
||||
const params: { ids?: string } = {}
|
||||
if (selectedIds.value.length > 0) {
|
||||
params.ids = selectedIds.value.join(',')
|
||||
}
|
||||
const data = await DeviceLedgerApi.exportCapacityReport(params)
|
||||
download.excel(data, t('EquipmentManagement.CapacityReport.exportFilename'))
|
||||
} catch {
|
||||
} finally {
|
||||
exportLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue