eam
/
eam-ui
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://dev.ccwin-in.com:3000/eam/eam-ui

master
ljlong_2630 8 months ago
parent
200e517ece eb68040d26
commit
441c81e31f
16 changed files with 995 additions and 2598 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/api/eam/item/itemAccounts/index.ts
  2. 22
      src/api/home/index.ts
  3. BIN
      src/assets/imgs/icon1.png
  4. BIN
      src/assets/imgs/icon2.png
  5. 7
      src/views/eam/basic/item/index.vue
  6. 831
      src/views/eam/device/deviceAccounts/index.vue
  7. 175
      src/views/eam/device/deviceInternalAudit/deviceInternalAudit.data.ts
  8. 29
      src/views/eam/item/itemAccounts/index.vue
  9. 381
      src/views/home/Index copy.vue
  10. 319
      src/views/home/Index2.vue
  11. 336
      src/views/home/components/material.vue
  12. 286
      src/views/home/components/produce.vue
  13. 313
      src/views/home/components/product.vue
  14. 452
      src/views/home/components/supplierIndex.vue
  15. 2
      src/views/home/echarts-data.ts
  16. 434
      src/views/home/index.vue

6
src/api/eam/item/itemAccounts/index.ts
View File

@ -55,3 +55,9 @@ export const importTemplate = () => {
export const replaceLocation = async (data: Array<ItemAccountsVO>) => {
return await request.post({url: `/eam/item-accounts/replaceLocation `, data });
};
// 备件不分页
export const getItemAccountsNoPage = async (params) => {
return await request.get({ url: `/eam/item-accounts/noPage`, params })
}

22
src/api/home/index.ts
View File

@ -1,22 +1,8 @@
import request from '@/config/axios'
// 供应商首页
// export const getSupplierData = async () => {
// return await request.get({ url: `/wms/index/indexSupplier` })
// }
// 首页获取设备停机状态/设备总数/月设备保养完成率/月汇总停机时间
export const getData = async () => {
return await request.get({ url: `http://localhost:12080/admin-api/eam/home-page/select` })
}
// // 原料管理员首页
// export const getMaterialData = async () => {
// return await request.get({ url: `/wms/index/indexMaterial` })
// }
// // 生产管理员首页
// export const getProduceData = async () => {
// return await request.get({ url: `/wms/index/indexProduce` })
// }
// // 成品管理员首页
// export const getProductData = async () => {
// return await request.get({ url: `/wms/index/indexProduct` })
// }

BIN
src/assets/imgs/icon1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/imgs/icon2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 21 KiB

7
src/views/eam/basic/item/index.vue
View File

@ -122,13 +122,6 @@
}
}
/** 添加设备操作 */
// const searchTableRef = ref()
// const openItem = (number : String) => {
// itemNumber.value = number;
// searchTableRef.value.open('设备列表', DeviceAccounts.allSchemas, DeviceAccountsApi.getDeviceAccountsPage(), null, Item.allSchemas.searchSchema, true, null, null, null, null);
// }
const searchTableRef = ref()
/** 绑定备件操作 */
const openItem = async (number : String) => {

831
src/views/eam/device/deviceAccounts/index.vue
View File

@ -1,36 +1,20 @@
<template>
<ContentWrap>
<!-- 搜索工作栏 -->
<Search
:schema="DeviceAccounts.allSchemas.searchSchema"
@search="setSearchParams"
@reset="setSearchParams"
/>
<Search :schema="DeviceAccounts.allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
</ContentWrap>
<!-- 列表头部 -->
<TableHead
:HeadButttondata="HeadButttondata"
@button-base-click="buttonBaseClick"
:routeName="routeName"
@updataTableColumns="updataTableColumns"
@searchFormClick="searchFormClick"
:allSchemas="DeviceAccounts.allSchemas"
/>
<TableHead :HeadButttondata="HeadButttondata" @button-base-click="buttonBaseClick" :routeName="routeName"
@updataTableColumns="updataTableColumns" @searchFormClick="searchFormClick"
:allSchemas="DeviceAccounts.allSchemas" />
<!-- 列表 -->
<ContentWrap>
<Table
:columns="tableColumns"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
<Table :columns="tableColumns" :data="tableObject.tableList" :loading="tableObject.loading" :pagination="{
total: tableObject.total
}"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage"
v-model:sort="tableObject.sort"
>
}" v-model:pageSize="tableObject.pageSize" v-model:currentPage="tableObject.currentPage"
v-model:sort="tableObject.sort">
<template #number="{ row }">
<el-button type="primary" link @click="openDetail(row, '编号', row.number)">
<span>{{ row.number }}</span>
@ -43,446 +27,421 @@
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<BasicForm
ref="basicFormRef"
@success="formsSuccess"
:rules="DeviceAccountsRules"
:formAllSchemas="DeviceAccounts.allSchemas"
:apiUpdate="DeviceAccountsApi.updateDeviceAccounts"
:apiCreate="DeviceAccountsApi.createDeviceAccounts"
@searchTableSuccess="searchTableSuccess"
:isBusiness="false"
/>
<BasicForm ref="basicFormRef" @success="formsSuccess" :rules="DeviceAccountsRules"
:formAllSchemas="DeviceAccounts.allSchemas" :apiUpdate="DeviceAccountsApi.updateDeviceAccounts"
:apiCreate="DeviceAccountsApi.createDeviceAccounts" @searchTableSuccess="searchTableSuccess" :isBusiness="false" />
<SearchTable ref="searchTableRef" @onMountedCallBack="onMountedCallBack" @searchTableSuccess="submitItem" />
<!-- 详情 -->
<DetailDeviceLedger
ref="detailRef"
:tabs="DeviceLedgerTabsList"
:subTabs="DeviceLedgerSubTabsList"
:isBasic="true"
:allSchemas="allSchemas"
@changeTabs="changeTabs"
:detailAllSchemas="detailAllSchemas"
:apiPage="apiPage"
:tabsExtend="tabsExtend"
:tabName="tabName"
:tableObjectExtend="tableObjectExtend"
:getImageApi="uploadApi.getImage"
:uploadImage="uploadApi.uploadImage"
:defaultParams="defaultParams"
:dialogApiPage="dialogApiPage"
:dialogAllSchemas="dialogAllSchemas"
/>
<DetailDeviceLedger ref="detailRef" :tabs="DeviceLedgerTabsList" :subTabs="DeviceLedgerSubTabsList" :isBasic="true"
:allSchemas="allSchemas" @changeTabs="changeTabs" :detailAllSchemas="detailAllSchemas" :apiPage="apiPage"
:tabsExtend="tabsExtend" :tabName="tabName" :tableObjectExtend="tableObjectExtend" :getImageApi="uploadApi.getImage"
:uploadImage="uploadApi.uploadImage" :defaultParams="defaultParams" :dialogApiPage="dialogApiPage"
:dialogAllSchemas="dialogAllSchemas" />
<!-- 导入 -->
<ImportForm
ref="importFormRef"
url="/eam/device-accounts/import"
:importTemplateData="importTemplateData"
@success="importSuccess"
/>
<ImportForm ref="importFormRef" url="/eam/device-accounts/import" :importTemplateData="importTemplateData"
@success="importSuccess" />
</template>
<script setup lang="ts">
import download from '@/utils/download'
import {
DeviceAccounts,
DeviceAccountsRules,
} from './deviceAccounts.data'
import { Item } from '@/views/eam/basic/item/item.data'
import * as ItemApi from '@/api/eam/basic/item'
import { createDeviceItemBatch, getDeviceItemPage,getDeviceItemNoPage } from '@/api/eam/basic/rel'
import * as DeviceAccountsApi from '@/api/eam/device/deviceAccounts'
import * as defaultButtons from '@/utils/disposition/defaultButtons'
import { DeviceLedgerTabsList } from '@/utils/disposition/tabsList'
import TableHead from '@/components/TableHead/src/TableHead.vue'
import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
import DetailDeviceLedger from '@/components/Detail/src/DetailDeviceLedger.vue'
import { DeviceRepair } from '@/views/eam/device/deviceRepair/deviceRepair.data'
import { DeviceItem } from '@/views/eam/basic/deviceItem/deviceItem.data'
import * as deviceRepairApi from '@/api/eam/device/deviceRepair'
import * as uploadApi from '@/api/eam/upload'
import * as DeviceMaintainOrderMainApi from '@/api/eam/device/deviceMaintainOrderMain'
import * as DeviceMaintainOrderDetailApi from '@/api/eam/device/deviceMaintainOrderDetail'
import * as DeviceMaintenanceMainApi from '@/api/eam/device/deviceMaintenanceMain'
import * as deviceMaintenanceDetailApi from '@/api/eam/device/deviceMaintenanceDetail'
import { getAccessToken } from '@/utils/auth'
import {
DeviceMaintainOrderMain,
DeviceMaintainOrderDetail,
} from '../devicemaintainjob/deviceMaintainOrderMain.data'
import {
DeviceMaintenanceMain,
DeviceMaintenanceDetail
} from '../devicemaintenancejob/deviceMaintenanceMain.data'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
defineOptions({ name: 'DeviceAccounts' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const route = useRoute() // 路由信息
const routeName = ref()
const deviceNumber = ref()
routeName.value = route.name
const tableColumns = ref(DeviceAccounts.allSchemas.tableColumns)
const allSchemas = ref(DeviceAccounts.allSchemas)
const detailAllSchemas = ref()
const apiPage = ref()
const itemCodeRow = ref()
const tableObjectExtend = ref()
const defaultParams = ref({})
const dialogApiPage = ref()
const dialogAllSchemas = ref()
const BASE_URL = import.meta.env.VITE_JMREPORT_BASE_URL
const src = ref(BASE_URL + '/jmreport/view/924818618605031424?token=' + getAccessToken())
// 查询页面返回
const searchTableSuccess = (formField, searchField, val, formRef) => {
nextTick(() => {
const setV = {}
setV[formField] = val[0][searchField]
formRef.setValues(setV)
})
}
// 字段设置 更新主列表字段
const updataTableColumns = (val) => {
tableColumns.value = val
}
const { tableObject, tableMethods } = useTable({
getListApi: DeviceAccountsApi.getDeviceAccountsPage // 分页接口
})
// 获得表格的各种操作
const { getList, setSearchParams } = tableMethods
// 列表头部按钮
const HeadButttondata = [
defaultButtons.defaultAddBtn(null), // 新增
defaultButtons.selectQrCodeBatchBtn(null), //批量生成二维码
// defaultButtons.defaultImportBtn(null), // 导入
// defaultButtons.defaultExportBtn(null), // 导出
defaultButtons.defaultFreshBtn(null), // 刷新
defaultButtons.defaultFilterBtn(null), // 筛选
defaultButtons.defaultSetBtn(null) // 设置
// {
// label: '自定义扩展按钮',
// name: 'zdy',
// hide: false,
// type: 'primary',
// icon: 'Select',
// color: ''
// },
]
// 头部按钮事件
const buttonBaseClick = (val, item) => {
if (val == 'add') {
// 新增
openForm('create')
} else if (val == 'import') {
// 导入
handleImport()
} else if (val == 'qrCodeBatch') {
// 批量生成二维码
qrCodeBatch(val, item)
} else if (val == 'export') {
// 导出
handleExport()
} else if (val == 'refresh') {
// 刷新
getList()
} else if (val == 'filtrate') {
// 筛选
} else {
// 其他按钮
console.log('其他按钮', item)
import download from '@/utils/download'
import {
DeviceAccounts,
DeviceAccountsRules,
} from './deviceAccounts.data'
import { Item } from '@/views/eam/basic/item/item.data'
import * as ItemApi from '@/api/eam/basic/item'
import { createDeviceItemBatch, getDeviceItemPage, getDeviceItemNoPage } from '@/api/eam/basic/rel'
import * as DeviceAccountsApi from '@/api/eam/device/deviceAccounts'
import * as defaultButtons from '@/utils/disposition/defaultButtons'
import { DeviceLedgerTabsList } from '@/utils/disposition/tabsList'
import TableHead from '@/components/TableHead/src/TableHead.vue'
import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
import DetailDeviceLedger from '@/components/Detail/src/DetailDeviceLedger.vue'
import { DeviceRepair } from '@/views/eam/device/deviceRepair/deviceRepair.data'
import { DeviceItem } from '@/views/eam/basic/deviceItem/deviceItem.data'
import * as deviceRepairApi from '@/api/eam/device/deviceRepair'
import * as uploadApi from '@/api/eam/upload'
import * as DeviceMaintainOrderMainApi from '@/api/eam/device/deviceMaintainOrderMain'
import * as DeviceMaintainOrderDetailApi from '@/api/eam/device/deviceMaintainOrderDetail'
import * as DeviceMaintenanceMainApi from '@/api/eam/device/deviceMaintenanceMain'
import * as deviceMaintenanceDetailApi from '@/api/eam/device/deviceMaintenanceDetail'
import { getAccessToken } from '@/utils/auth'
import {
DeviceMaintainOrderMain,
DeviceMaintainOrderDetail,
} from '../devicemaintainjob/deviceMaintainOrderMain.data'
import {
DeviceMaintenanceMain,
DeviceMaintenanceDetail
} from '../devicemaintenancejob/deviceMaintenanceMain.data'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
defineOptions({ name: 'DeviceAccounts' })
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const route = useRoute() // 路由信息
const routeName = ref()
const deviceNumber = ref()
routeName.value = route.name
const tableColumns = ref(DeviceAccounts.allSchemas.tableColumns)
const allSchemas = ref(DeviceAccounts.allSchemas)
const detailAllSchemas = ref()
const apiPage = ref()
const itemCodeRow = ref()
const tableObjectExtend = ref()
const defaultParams = ref({})
const dialogApiPage = ref()
const dialogAllSchemas = ref()
const BASE_URL = import.meta.env.VITE_JMREPORT_BASE_URL
const src = ref(BASE_URL + '/jmreport/view/924818618605031424?token=' + getAccessToken())
// 查询页面返回
const searchTableSuccess = (formField, searchField, val, formRef) => {
nextTick(() => {
const setV = {}
setV[formField] = val[0][searchField]
formRef.setValues(setV)
})
}
// 字段设置 更新主列表字段
const updataTableColumns = (val) => {
tableColumns.value = val
}
}
// 列表-操作按钮
const butttondata = [
defaultButtons.mainListEditBtn(null), // 编辑
// defaultButtons.mainListDeleteBtn(null), // 删除
defaultButtons.selectQrCodeBtn(null), //二维码
defaultButtons.selectItemBtn(null) //备件
]
// 列表-操作按钮事件
const buttonTableClick = async (val, row) => {
if (val == 'edit') {
// 编辑
openForm('update', row)
} else if (val == 'selectQrCode') {
// 二维码
openQrCode(row.number)
} else if (val == 'selectItem') {
openItem(row.number)
} else if (val == 'qrCode') {
window.open(src.value + "&number='" + row.number + "'")
} else {
// 其他按钮
console.log('其他按钮', val, row)
const { tableObject, tableMethods } = useTable({
getListApi: DeviceAccountsApi.getDeviceAccountsPage // 分页接口
})
// 获得表格的各种操作
const { getList, setSearchParams } = tableMethods
// 列表头部按钮
const HeadButttondata = [
defaultButtons.defaultAddBtn(null), // 新增
defaultButtons.selectQrCodeBatchBtn(null), //批量生成二维码
// defaultButtons.defaultImportBtn(null), // 导入
// defaultButtons.defaultExportBtn(null), // 导出
defaultButtons.defaultFreshBtn(null), // 刷新
defaultButtons.defaultFilterBtn(null), // 筛选
defaultButtons.defaultSetBtn(null) // 设置
// {
// label: '自定义扩展按钮',
// name: 'zdy',
// hide: false,
// type: 'primary',
// icon: 'Select',
// color: ''
// },
]
// 头部按钮事件
const buttonBaseClick = (val, item) => {
if (val == 'add') {
// 新增
openForm('create')
} else if (val == 'import') {
// 导入
handleImport()
} else if (val == 'qrCodeBatch') {
// 批量生成二维码
qrCodeBatch(val, item)
} else if (val == 'export') {
// 导出
handleExport()
} else if (val == 'refresh') {
// 刷新
getList()
} else if (val == 'filtrate') {
// 筛选
} else {
// 其他按钮
console.log('其他按钮', item)
}
}
}
// 列表-操作按钮
const butttondata = [
defaultButtons.mainListEditBtn(null), // 编辑
// defaultButtons.mainListDeleteBtn(null), // 删除
defaultButtons.selectQrCodeBtn(null), //二维码
defaultButtons.selectItemBtn(null) //备件
]
/** 添加/修改操作 */
const basicFormRef = ref()
const openForm = (type: string, row?: any) => {
basicFormRef.value.open(type, row)
}
// form表单提交
const formsSuccess = async (formType, data) => {
var isHave = DeviceAccounts.allSchemas.formSchema.some(function (item) {
return item.field === 'activeTime' || item.field === 'expireTime'
})
if (isHave) {
if (data.activeTime && data.expireTime && data.activeTime >= data.expireTime) {
message.error('失效时间要大于生效时间')
return
// 列表-操作按钮事件
const buttonTableClick = async (val, row) => {
if (val == 'edit') {
// 编辑
openForm('update', row)
} else if (val == 'selectQrCode') {
// 二维码
openQrCode(row.number)
} else if (val == 'selectItem') {
openItem(row.number)
} else if (val == 'qrCode') {
window.open(src.value + "&number='" + row.number + "'")
} else {
// 其他按钮
console.log('其他按钮', val, row)
}
}
if (data.activeTime == 0) data.activeTime = null
if (data.expireTime == 0) data.expireTime = null
if (formType === 'create') {
await DeviceAccountsApi.createDeviceAccounts(data)
message.success(t('common.createSuccess'))
} else {
await DeviceAccountsApi.updateDeviceAccounts(data)
message.success(t('common.updateSuccess'))
}
basicFormRef.value.dialogVisible = false
getList()
}
/** 详情操作 */
const detailRef = ref()
const openDetail = (row: any, titleName: any, titleValue: any) => {
itemCodeRow.value = row.number
tabsExtend.value = 1
detailRef.value.openDetail(row, titleName, titleValue, 'basicDeviceAccounts')
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await DeviceAccountsApi.deleteDeviceAccounts(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
/** 导出按钮操作 */
const exportLoading = ref(false) // 导出的加载中
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await DeviceAccountsApi.exportDeviceAccounts(tableObject.params)
download.excel(data, '设备台账.xlsx')
} catch {
} finally {
exportLoading.value = false
}
}
/** 导入 */
const importFormRef = ref()
const handleImport = () => {
importFormRef.value.open()
}
// 导入附件弹窗所需的参数
const importTemplateData = reactive({
templateUrl: '',
templateTitle: '设备台账导入模版.xlsx'
})
// 导入成功之后
const importSuccess = () => {
getList()
}
// 筛选提交
const searchFormClick = (searchData) => {
tableObject.params = {
isSearch: true,
filters: searchData.filters
/** 添加/修改操作 */
const basicFormRef = ref()
const openForm = (type : string, row ?: any) => {
basicFormRef.value.open(type, row)
}
getList() // 刷新当前列表
}
const DeviceLedgerSubTabsList = getStrDictOptions(DICT_TYPE.DEVICE_DOC_TYPE)
const tabsExtend = ref()
const tabName = ref()
const funcCode = ref('device_mould_picture')
// tabs 切换事件
const changeTabs = (item) => {
if (item.prop == 'Image') {
tabsExtend.value = 1
tabName.value = item.label
funcCode.value = 'device_mould_picture'
// apiPage.value = CustomeritemApi.getCustomeritemPage
// detailAllSchemas.value = Customeritem.allSchemas
} else if (item.prop == 'Word') {
tabsExtend.value = 2
tabName.value = item.label
funcCode.value = 'device_mould_attachment'
// apiPage.value = PurchaseDetailApi.getPurchaseDetailPage
// detailAllSchemas.value = PurchaseMain.allSchemas
} else if (item.prop == 'Part') {
tabsExtend.value = 4
tabName.value = item.label
defaultParams.value = {
deviceNumber: itemCodeRow
// form表单提交
const formsSuccess = async (formType, data) => {
var isHave = DeviceAccounts.allSchemas.formSchema.some(function (item) {
return item.field === 'activeTime' || item.field === 'expireTime'
})
if (isHave) {
if (data.activeTime && data.expireTime && data.activeTime >= data.expireTime) {
message.error('失效时间要大于生效时间')
return
}
}
apiPage.value = getDeviceItemPage
detailAllSchemas.value = DeviceItem.allSchemas
} else if (item.prop == 'DeviceReportRecord') {
tabsExtend.value = 4
tabName.value = item.label
defaultParams.value = {
deviceNumber: itemCodeRow
if (data.activeTime == 0) data.activeTime = null
if (data.expireTime == 0) data.expireTime = null
if (formType === 'create') {
await DeviceAccountsApi.createDeviceAccounts(data)
message.success(t('common.createSuccess'))
} else {
await DeviceAccountsApi.updateDeviceAccounts(data)
message.success(t('common.updateSuccess'))
}
apiPage.value = deviceRepairApi.getDeviceRepairPage
detailAllSchemas.value = DeviceRepair.allSchemas
} else if (item.prop == 'RepairRecord') {
tabsExtend.value = 3
tabName.value = item.label
defaultParams.value = {
deviceNumber: itemCodeRow
basicFormRef.value.dialogVisible = false
getList()
}
/** 详情操作 */
const detailRef = ref()
const openDetail = (row : any, titleName : any, titleValue : any) => {
itemCodeRow.value = row.number
tabsExtend.value = 1
detailRef.value.openDetail(row, titleName, titleValue, 'basicDeviceAccounts')
}
/** 删除按钮操作 */
const handleDelete = async (id : number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await DeviceAccountsApi.deleteDeviceAccounts(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch { }
}
/** 导出按钮操作 */
const exportLoading = ref(false) // 导出的加载中
const handleExport = async () => {
try {
// 导出的二次确认
await message.exportConfirm()
// 发起导出
exportLoading.value = true
const data = await DeviceAccountsApi.exportDeviceAccounts(tableObject.params)
download.excel(data, '设备台账.xlsx')
} catch {
} finally {
exportLoading.value = false
}
apiPage.value = DeviceMaintenanceMainApi.getDeviceMaintenanceMainPage
detailAllSchemas.value = DeviceMaintenanceMain.allSchemas
dialogApiPage.value = deviceMaintenanceDetailApi.getDeviceMaintenanceDetailPage
dialogAllSchemas.value = DeviceMaintenanceDetail.allSchemas
} else if (item.prop == 'MaintenanceRecord') {
tabsExtend.value = 3
tabName.value = item.label
defaultParams.value = {
deviceNumber: itemCodeRow
}
/** 导入 */
const importFormRef = ref()
const handleImport = () => {
importFormRef.value.open()
}
// 导入附件弹窗所需的参数
const importTemplateData = reactive({
templateUrl: '',
templateTitle: '设备台账导入模版.xlsx'
})
// 导入成功之后
const importSuccess = () => {
getList()
}
// 筛选提交
const searchFormClick = (searchData) => {
tableObject.params = {
isSearch: true,
filters: searchData.filters
}
apiPage.value = DeviceMaintainOrderMainApi.getDeviceMaintainOrderMainPage
detailAllSchemas.value = DeviceMaintainOrderMain.allSchemas
dialogApiPage.value = DeviceMaintainOrderDetailApi.getDeviceMaintainOrderDetailPage
dialogAllSchemas.value = DeviceMaintainOrderDetail.allSchemas
getList() // 刷新当前列表
}
// detailAllSchemas.value.tableColumns.map((item, index) => {
// if (item.field == 'action') {
// detailAllSchemas.value.tableColumns.splice(index, 1)
// }
// })
// 当前物料代码作为条件
tableObjectExtend.value = [
{
key: 'itemCode',
value: itemCodeRow.value
const DeviceLedgerSubTabsList = getStrDictOptions(DICT_TYPE.DEVICE_DOC_TYPE)
const tabsExtend = ref()
const tabName = ref()
const funcCode = ref('device_mould_picture')
// tabs 切换事件
const changeTabs = (item) => {
if (item.prop == 'Image') {
tabsExtend.value = 1
tabName.value = item.label
funcCode.value = 'device_mould_picture'
// apiPage.value = CustomeritemApi.getCustomeritemPage
// detailAllSchemas.value = Customeritem.allSchemas
} else if (item.prop == 'Word') {
tabsExtend.value = 2
tabName.value = item.label
funcCode.value = 'device_mould_attachment'
// apiPage.value = PurchaseDetailApi.getPurchaseDetailPage
// detailAllSchemas.value = PurchaseMain.allSchemas
} else if (item.prop == 'Part') {
tabsExtend.value = 4
tabName.value = item.label
defaultParams.value = {
deviceNumber: itemCodeRow
}
apiPage.value = getDeviceItemPage
detailAllSchemas.value = DeviceItem.allSchemas
} else if (item.prop == 'DeviceReportRecord') {
tabsExtend.value = 4
tabName.value = item.label
defaultParams.value = {
deviceNumber: itemCodeRow
}
apiPage.value = deviceRepairApi.getDeviceRepairPage
detailAllSchemas.value = DeviceRepair.allSchemas
} else if (item.prop == 'RepairRecord') {
tabsExtend.value = 3
tabName.value = item.label
defaultParams.value = {
deviceNumber: itemCodeRow
}
apiPage.value = DeviceMaintenanceMainApi.getDeviceMaintenanceMainPage
detailAllSchemas.value = DeviceMaintenanceMain.allSchemas
dialogApiPage.value = deviceMaintenanceDetailApi.getDeviceMaintenanceDetailPage
dialogAllSchemas.value = DeviceMaintenanceDetail.allSchemas
} else if (item.prop == 'MaintenanceRecord') {
tabsExtend.value = 3
tabName.value = item.label
defaultParams.value = {
deviceNumber: itemCodeRow
}
apiPage.value = DeviceMaintainOrderMainApi.getDeviceMaintainOrderMainPage
detailAllSchemas.value = DeviceMaintainOrderMain.allSchemas
dialogApiPage.value = DeviceMaintainOrderDetailApi.getDeviceMaintainOrderDetailPage
dialogAllSchemas.value = DeviceMaintainOrderDetail.allSchemas
}
]
}
/** 初始化 **/
onMounted(async () => {
getList()
importTemplateData.templateUrl = await DeviceAccountsApi.importTemplate()
})
/** 二维码 */
const openQrCode = async (number: String) => {
// const data = await DeviceAccountsApi.getQrCode(number)
// const url = window.URL.createObjectURL(new Blob([data]))
// const link = document.createElement('a')
// link.style.display = 'none'
// link.href = url
// link.setAttribute('download', '设备二维码.png')
// document.body.appendChild(link)
// link.click()
// try {
// // 删除的二次确认
// await message.delConfirm()
// // 发起删除
// await DeviceAccountsApi.deleteDeviceAccounts(id)
// message.success(t('common.delSuccess'))
// // 刷新列表
// await getList()
// } catch {}
}
const searchTableRef = ref()
/** 绑定备件操作 */
const openItem = async (number: String) => {
deviceNumber.value = number
await CallBack1()
searchTableRef.value.open(
'选择备件',
Item.allSchemas,
ItemApi.getItemPage,
null,
Item.allSchemas.searchSchema,
true,
null,
null,
null,
null,
searchTableSelections.value
)
}
const submitItem = async (formFieldRef, searchFieldRef, selections, typeRef, rowRef) => {
const deviceItemRelList = selections.map((element) => ({
deviceNumber: deviceNumber.value,
itemNumber: element.number
}))
createDeviceItemBatch(deviceItemRelList).then((res) => {
console.log('res', res)
// detailAllSchemas.value.tableColumns.map((item, index) => {
// if (item.field == 'action') {
// detailAllSchemas.value.tableColumns.splice(index, 1)
// }
// })
// 当前物料代码作为条件
tableObjectExtend.value = [
{
key: 'itemCode',
value: itemCodeRow.value
}
]
}
/** 初始化 **/
onMounted(async () => {
getList()
importTemplateData.templateUrl = await DeviceAccountsApi.importTemplate()
})
console.log('deviceItemRelList', deviceItemRelList)
}
const getDeviceItemBindData = async (params) => {
const response = await getDeviceItemPage(params);
return response?.data;
}
const qrCodeBatch = async (val,item) => {
const qrCodeList = tableObject.tableList.map(item => `'${item?.number}'`).join(', ')
window.open(src.value + "&number=" + qrCodeList)
}
const searchTableSelections = ref([])
const CallBack1 = async () => {
await getDeviceItemNoPage({ deviceNumber: deviceNumber.value }).then(async(res) => {
await ItemApi.getItemNoPage().then(response => {
searchTableSelections.value = response.filter(element => {
let flag = false;
res.forEach(item => {
if (element.number == item.itemNumber) {
flag = true;
}
/** 二维码 */
const openQrCode = async (number : String) => {
// const data = await DeviceAccountsApi.getQrCode(number)
// const url = window.URL.createObjectURL(new Blob([data]))
// const link = document.createElement('a')
// link.style.display = 'none'
// link.href = url
// link.setAttribute('download', '设备二维码.png')
// document.body.appendChild(link)
// link.click()
// try {
// // 删除的二次确认
// await message.delConfirm()
// // 发起删除
// await DeviceAccountsApi.deleteDeviceAccounts(id)
// message.success(t('common.delSuccess'))
// // 刷新列表
// await getList()
// } catch {}
}
const searchTableRef = ref()
/** 绑定备件操作 */
const openItem = async (number : String) => {
deviceNumber.value = number
await CallBack1()
searchTableRef.value.open(
'选择备件',
Item.allSchemas,
ItemApi.getItemPage,
null,
Item.allSchemas.searchSchema,
true,
null,
null,
null,
null,
searchTableSelections.value
)
}
const submitItem = async (formFieldRef, searchFieldRef, selections, typeRef, rowRef) => {
const deviceItemRelList = selections.map((element) => ({
deviceNumber: deviceNumber.value,
itemNumber: element.number
}))
createDeviceItemBatch(deviceItemRelList).then((res) => {
console.log('res', res)
})
console.log('deviceItemRelList', deviceItemRelList)
}
const getDeviceItemBindData = async (params) => {
const response = await getDeviceItemPage(params);
return response?.data;
}
const qrCodeBatch = async (val, item) => {
const qrCodeList = tableObject.tableList.map(item => `'${item?.number}'`).join(', ')
window.open(src.value + "&number=" + qrCodeList)
}
const searchTableSelections = ref([])
const CallBack1 = async () => {
await getDeviceItemNoPage({ deviceNumber: deviceNumber.value }).then(async (res) => {
await ItemApi.getItemNoPage().then(response => {
searchTableSelections.value = response.filter(element => {
let flag = false;
res.forEach(item => {
if (element.number == item.itemNumber) {
flag = true;
}
});
return flag;
});
return flag;
});
});
});
};
};
</script>

175
src/views/eam/device/deviceInternalAudit/deviceInternalAudit.data.ts
View File

@ -3,8 +3,36 @@ import { dateFormatter } from '@/utils/formatTime'
// 表单校验
export const DeviceInternalAuditRules = reactive({
number: [required],
personer: [required],
personer: [
{ required: true, message: '请输入人员', trigger: 'blur' },
],
fitOut: [
{ required: true, message: '请输入装配', trigger: 'blur' },
],
coating: [
{ required: true, message: '请输入涂装', trigger: 'blur' },
],
injectionMolding: [
{ required: true, message: '请输入注塑', trigger: 'blur' },
],
business: [
{ required: true, message: '请输入商务', trigger: 'blur' },
],
laboratory: [
{ required: true, message: '请输入实验室', trigger: 'blur' },
],
it: [
{ required: true, message: '请输入IT', trigger: 'blur' },
],
qualityDepartment: [
{ required: true, message: '请输入质量保障部', trigger: 'blur' },
],
materialFlow: [
{ required: true, message: '请输入物流', trigger: 'blur' },
],
moldPre: [
{ required: true, message: '请输入模具前期', trigger: 'blur' },
],
})
export const DeviceInternalAudit = useCrudSchemas(reactive<CrudSchema[]>([
@ -19,7 +47,7 @@ export const DeviceInternalAudit = useCrudSchemas(reactive<CrudSchema[]>([
fixed: 'left'
},
},
{
label: '人员',
field: 'personer',
@ -30,92 +58,207 @@ export const DeviceInternalAudit = useCrudSchemas(reactive<CrudSchema[]>([
label: '装配',
field: 'fitOut',
sort: 'custom',
isSearch: false,
table: {
width: 150
},
form: {
component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
}
},
{
label: '涂装',
field: 'coating',
sort: 'custom',
isSearch: false,
table: {
width: 150
},
form: {
component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
}
},
{
label: '注塑',
field: 'injectionMolding',
sort: 'custom',
isSearch: false,
table: {
width: 150
},
form: {
component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
}
},
{
label: '商务',
field: 'business',
sort: 'custom',
isSearch: false,
table: {
width: 150
},
form: {
component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
}
},
{
label: '实验室',
field: 'laboratory',
sort: 'custom',
isSearch: false,
table: {
width: 150,
width: 150
},
form: {
component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
}
},
{
label: 'IT',
field: 'it',
sort: 'custom',
isSearch: false,
table: {
width: 150
},
form: {
component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
}
},
{
label: '质量保障部',
field: 'qualityDepartment',
sort: 'custom',
isSearch: false,
table: {
width: 180,
width: 150
},
form: {
component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
}
},
{
label: '物流',
field: 'materialFlow',
sort: 'custom',
isSearch: false,
table: {
width: 150
},
form: {
component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
}
},
{
label: '模具前期',
field: 'moldPre',
sort: 'custom',
isSearch: false,
table: {
width: 150,
width: 150
},
form: {
component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
}
},
{
label: '平均分',
field: 'average',
sort: 'custom',
isForm: false,
isSearch: false,
},
{
label: '描述',
field: 'describes',
@ -166,7 +309,7 @@ export const DeviceInternalAudit = useCrudSchemas(reactive<CrudSchema[]>([
},
isForm: false,
},
{
label: '操作',
field: 'action',

29
src/views/eam/item/itemAccounts/index.vue
View File

@ -142,8 +142,8 @@
wantId1.value = wantId
searchTableRef.value.open(
'选择备件',
Item.allSchemas,
getDeviceItemList,
Item.allSchemas,
ItemApi.getItemPage,
null,
Item.allSchemas.searchSchema,
true,
@ -153,13 +153,11 @@
null
)
}
const submitItem = async (formFieldRef, searchFieldRef, selections, typeRef, rowRef) => {
const deviceItemRelList = selections.map((element) => ({
id: wantId1.value,
locationNumber: locationNumber.value,
itemNumber: element.number,
id: wantId1.value,
locationNumber: locationNumber.value,
itemNumber: element.number,
}))
ItemAccountsApi.replaceLocation(deviceItemRelList).then((res) => {
message.success(t('更换成功'))
@ -193,23 +191,6 @@
}
}
// 将 getListApi 替换为 getItemWithOutBind
const getDeviceItemList = async () => {
tableObject.loading = true
try {
const res = await getItemWithOutBind()
let result = {
list: res,
total: res.length
}
return result
} catch (error) {
console.error(error)
} finally {
tableObject.loading = false
}
}
/** 添加/修改操作 */
const basicFormRef = ref()
const openForm = (type : string, row ?: any) => {

381
src/views/home/Index copy.vue
View File

@ -1,381 +0,0 @@
<template>
<div>
<el-card shadow="never">
<el-skeleton :loading="loading" animated>
<el-row :gutter="20" justify="space-between">
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="flex items-center">
<img :src="avatar" alt="" class="mr-20px h-70px w-70px rounded-[50%]" />
<div>
<div class="text-20px">
{{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
</div>
<div class="mt-10px text-14px text-gray-500">
{{ t('workplace.toady') }}，20℃ - 32℃！
</div>
</div>
</div>
</el-col>
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="h-70px flex items-center justify-end lt-sm:mt-10px">
<div class="px-8px text-right">
<div class="mb-20px text-14px text-gray-400">{{ t('workplace.project') }}</div>
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.project"
:duration="2600"
/>
</div>
<el-divider direction="vertical" />
<div class="px-8px text-right">
<div class="mb-20px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.todo"
:duration="2600"
/>
</div>
<el-divider direction="vertical" border-style="dashed" />
<div class="px-8px text-right">
<div class="mb-20px text-14px text-gray-400">{{ t('workplace.access') }}</div>
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.access"
:duration="2600"
/>
</div>
</div>
</el-col>
</el-row>
</el-skeleton>
</el-card>
</div>
<el-row class="mt-5px" :gutter="20" justify="space-between">
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-10px">
<el-card shadow="never">
<template #header>
<div class="h-3 flex justify-between">
<span>{{ t('workplace.project') }}</span>
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
</div>
</template>
<el-skeleton :loading="loading" animated>
<el-row>
<el-col
v-for="(item, index) in projects"
:key="`card-${index}`"
:xl="8"
:lg="8"
:md="8"
:sm="24"
:xs="24"
>
<el-card shadow="hover">
<div class="flex items-center">
<Icon :icon="item.icon" :size="25" class="mr-10px" />
<span class="text-16px">{{ item.name }}</span>
</div>
<div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div>
<div class="mt-20px flex justify-between text-12px text-gray-400">
<span>{{ item.personal }}</span>
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
</div>
</el-card>
</el-col>
</el-row>
</el-skeleton>
</el-card>
<el-card shadow="never" class="mt-5px">
<el-skeleton :loading="loading" animated>
<el-row :gutter="20" justify="space-between">
<el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px">
<el-skeleton :loading="loading" animated>
<Echart :options="pieOptionsData" :height="280" />
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px">
<el-skeleton :loading="loading" animated>
<Echart :options="barOptionsData" :height="280" />
</el-skeleton>
</el-card>
</el-col>
</el-row>
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-10px">
<el-card shadow="never">
<template #header>
<div class="h-3 flex justify-between">
<span>{{ t('workplace.shortcutOperation') }}</span>
</div>
</template>
<el-skeleton :loading="loading" animated>
<el-row>
<el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-10px">
<div class="flex items-center">
<Icon :icon="item.icon" class="mr-10px" />
<el-link type="default" :underline="false" @click="setWatermark(item.name)">
{{ item.name }}
</el-link>
</div>
</el-col>
</el-row>
</el-skeleton>
</el-card>
<el-card shadow="never" class="mt-10px">
<template #header>
<div class="h-3 flex justify-between">
<span>{{ t('workplace.notice') }}</span>
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
</div>
</template>
<el-skeleton :loading="loading" animated>
<div v-for="(item, index) in notice" :key="`dynamics-${index}`">
<div class="flex items-center">
<img :src="avatar" alt="" class="mr-20px h-35px w-35px rounded-[50%]" />
<div>
<div class="text-14px">
<Highlight :keys="item.keys.map((v) => t(v))">
{{ item.type }} : {{ item.title }}
</Highlight>
</div>
<div class="mt-15px text-12px text-gray-400">
{{ formatTime(item.date, 'yyyy-MM-dd') }}
</div>
</div>
</div>
<el-divider />
</div>
</el-skeleton>
</el-card>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'
import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark'
import avatarImg from '@/assets/imgs/avatar.gif'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { pieOptions, barOptions } from './echarts-data'
defineOptions({ name: 'Home' })
const { t } = useI18n()
const userStore = useUserStore()
const { setWatermark } = useWatermark()
const loading = ref(true)
const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg
const username = userStore.getUser.nickname
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
project: 0,
access: 0,
todo: 0
})
const getCount = async () => {
const data = {
project: 40,
access: 2340,
todo: 10
}
totalSate = Object.assign(totalSate, data)
}
// 获取项目数
let projects = reactive<Project[]>([])
const getProject = async () => {
const data = [
{
name: 'Github',
icon: 'akar-icons:github-fill',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Vue',
icon: 'logos:vue',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Angular',
icon: 'logos:angular-icon',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'React',
icon: 'logos:react',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Webpack',
icon: 'logos:webpack',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Vite',
icon: 'vscode-icons:file-type-vite',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
}
]
projects = Object.assign(projects, data)
}
// 获取通知公告
let notice = reactive<Notice[]>([])
const getNotice = async () => {
const data = [
{
title: '系统升级版本',
type: '通知',
keys: ['通知', '升级'],
date: new Date()
},
{
title: '系统凌晨维护',
type: '公告',
keys: ['公告', '维护'],
date: new Date()
},
{
title: '系统升级版本',
type: '通知',
keys: ['通知', '升级'],
date: new Date()
},
{
title: '系统凌晨维护',
type: '公告',
keys: ['公告', '维护'],
date: new Date()
}
]
notice = Object.assign(notice, data)
}
// 获取快捷入口
let shortcut = reactive<Shortcut[]>([])
const getShortcut = async () => {
const data = [
{
name: 'Github',
icon: 'akar-icons:github-fill',
url: 'github.io'
},
{
name: 'Vue',
icon: 'logos:vue',
url: 'vuejs.org'
},
{
name: 'Vite',
icon: 'vscode-icons:file-type-vite',
url: 'https://vitejs.dev/'
},
{
name: 'Angular',
icon: 'logos:angular-icon',
url: 'github.io'
},
{
name: 'React',
icon: 'logos:react',
url: 'github.io'
},
{
name: 'Webpack',
icon: 'logos:webpack',
url: 'github.io'
}
]
shortcut = Object.assign(shortcut, data)
}
// 用户来源
const getUserAccessSource = async () => {
const data = [
{ value: 335, name: 'analysis.directAccess' },
{ value: 310, name: 'analysis.mailMarketing' },
{ value: 234, name: 'analysis.allianceAdvertising' },
{ value: 135, name: 'analysis.videoAdvertising' },
{ value: 1548, name: 'analysis.searchEngines' }
]
set(
pieOptionsData,
'legend.data',
data.map((v) => t(v.name))
)
pieOptionsData!.series![0].data = data.map((v) => {
return {
name: t(v.name),
value: v.value
}
})
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
// 周活跃量
const getWeeklyUserActivity = async () => {
const data = [
{ value: 13253, name: 'analysis.monday' },
{ value: 34235, name: 'analysis.tuesday' },
{ value: 26321, name: 'analysis.wednesday' },
{ value: 12340, name: 'analysis.thursday' },
{ value: 24643, name: 'analysis.friday' },
{ value: 1322, name: 'analysis.saturday' },
{ value: 1324, name: 'analysis.sunday' }
]
set(
barOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(barOptionsData, 'series', [
{
name: t('analysis.activeQuantity'),
data: data.map((v) => v.value),
type: 'bar'
}
])
}
const getAllApi = async () => {
await Promise.all([
getCount(),
getProject(),
getNotice(),
getShortcut(),
getUserAccessSource(),
getWeeklyUserActivity()
])
loading.value = false
}
getAllApi()
</script>

319
src/views/home/Index2.vue
View File

@ -1,319 +0,0 @@
<template>
<el-row :class="prefixCls" :gutter="20" justify="space-between">
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="2" animated>
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
>
<Icon :size="40" icon="svg-icon:peoples" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
>{{ t('analysis.newUser') }}
</div>
<CountTo
:duration="2600"
:end-val="102400"
:start-val="0"
class="text-right text-20px font-700"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="2" animated>
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`"
>
<Icon :size="40" icon="svg-icon:message" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
>{{ t('analysis.unreadInformation') }}
</div>
<CountTo
:duration="2600"
:end-val="81212"
:start-val="0"
class="text-right text-20px font-700"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="2" animated>
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`"
>
<Icon :size="40" icon="svg-icon:money" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
>{{ t('analysis.transactionAmount') }}
</div>
<CountTo
:duration="2600"
:end-val="9280"
:start-val="0"
class="text-right text-20px font-700"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="2" animated>
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`"
>
<Icon :size="40" icon="svg-icon:shopping" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
>{{ t('analysis.totalShopping') }}
</div>
<CountTo
:duration="2600"
:end-val="13600"
:start-val="0"
class="text-right text-20px font-700"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" justify="space-between">
<el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" animated>
<Echart :height="300" :options="pieOptionsData" />
</el-skeleton>
</el-card>
</el-col>
<el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" animated>
<Echart :height="300" :options="barOptionsData" />
</el-skeleton>
</el-card>
</el-col>
<el-col :span="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="4" animated>
<Echart :height="350" :options="lineOptionsData" />
</el-skeleton>
</el-card>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useDesign } from '@/hooks/web/useDesign'
import type { AnalysisTotalTypes } from './types'
import { barOptions, lineOptions, pieOptions } from './echarts-data'
defineOptions({ name: 'Home2' })
const { t } = useI18n()
const loading = ref(true)
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('panel')
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
let totalState = reactive<AnalysisTotalTypes>({
users: 0,
messages: 0,
moneys: 0,
shoppings: 0
})
const getCount = async () => {
const data = {
users: 102400,
messages: 81212,
moneys: 9280,
shoppings: 13600
}
totalState = Object.assign(totalState, data)
}
// 用户来源
const getUserAccessSource = async () => {
const data = [
{ value: 335, name: 'analysis.directAccess' },
{ value: 310, name: 'analysis.mailMarketing' },
{ value: 234, name: 'analysis.allianceAdvertising' },
{ value: 135, name: 'analysis.videoAdvertising' },
{ value: 1548, name: 'analysis.searchEngines' }
]
set(
pieOptionsData,
'legend.data',
data.map((v) => t(v.name))
)
set(pieOptionsData, 'series.data', data)
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
// 周活跃量
const getWeeklyUserActivity = async () => {
const data = [
{ value: 13253, name: 'analysis.monday' },
{ value: 34235, name: 'analysis.tuesday' },
{ value: 26321, name: 'analysis.wednesday' },
{ value: 12340, name: 'analysis.thursday' },
{ value: 24643, name: 'analysis.friday' },
{ value: 1322, name: 'analysis.saturday' },
{ value: 1324, name: 'analysis.sunday' }
]
set(
barOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(barOptionsData, 'series', [
{
name: t('analysis.activeQuantity'),
data: data.map((v) => v.value),
type: 'bar'
}
])
}
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
// 每月销售总额
const getMonthlySales = async () => {
const data = [
{ estimate: 100, actual: 120, name: 'analysis.january' },
{ estimate: 120, actual: 82, name: 'analysis.february' },
{ estimate: 161, actual: 91, name: 'analysis.march' },
{ estimate: 134, actual: 154, name: 'analysis.april' },
{ estimate: 105, actual: 162, name: 'analysis.may' },
{ estimate: 160, actual: 140, name: 'analysis.june' },
{ estimate: 165, actual: 145, name: 'analysis.july' },
{ estimate: 114, actual: 250, name: 'analysis.august' },
{ estimate: 163, actual: 134, name: 'analysis.september' },
{ estimate: 185, actual: 56, name: 'analysis.october' },
{ estimate: 118, actual: 99, name: 'analysis.november' },
{ estimate: 123, actual: 123, name: 'analysis.december' }
]
set(
lineOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(lineOptionsData, 'series', [
{
name: t('analysis.estimate'),
smooth: true,
type: 'line',
data: data.map((v) => v.estimate),
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: t('analysis.actual'),
smooth: true,
type: 'line',
itemStyle: {},
data: data.map((v) => v.actual),
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
])
}
const getAllApi = async () => {
await Promise.all([getCount(), getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()])
loading.value = false
}
getAllApi()
</script>
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-panel;
.#{$prefix-cls} {
&__item {
&--peoples {
color: #40c9c6;
}
&--message {
color: #36a3f7;
}
&--money {
color: #f4516c;
}
&--shopping {
color: #34bfa3;
}
&:hover {
:deep(.#{$namespace}-icon) {
color: #fff !important;
}
.#{$prefix-cls}__item--icon {
transition: all 0.38s ease-out;
}
.#{$prefix-cls}__item--peoples {
background: #40c9c6;
}
.#{$prefix-cls}__item--message {
background: #36a3f7;
}
.#{$prefix-cls}__item--money {
background: #f4516c;
}
.#{$prefix-cls}__item--shopping {
background: #34bfa3;
}
}
}
}
</style>

336
src/views/home/components/material.vue
View File

@ -1,336 +0,0 @@
<!-- 原料管理员首页 -->
<template>
<div class="row">
<div class="data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>今日到货计划(已发货)</div>
<div>{{materialData?.preparetoissueTodayCount}}<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item2 ml-14px">
<div class="small-data-item-txt">
<div>今日备料计划(已发料)</div>
<div>{{materialData?.preparetoissueTodayCount}}<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon5.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item3 ml-14px">
<div class="small-data-item-txt">
<div>今日叫料请求(已发料)</div>
<div>{{materialData?.issueRequestTodayCount}}<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon6.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4 ml-14px">
<div class="small-data-item-txt">
<div>空闲库位数/总库位数</div>
<div style="font-size: 20px;">{{materialData?.freeLocationCount}}<span>个</span>/{{materialData?.totalLocationCount}}<span>个</span></div>
</div>
<img src="../../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[47.3%]">
<div class="title">呆滞库存预警</div>
<el-table
:data="materialData?.stagnantBalanceList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="itemCode" label="物料代码" width="180px" />
<el-table-column prop="batch" label="批次" width="180px" />
<el-table-column prop="packingNumber" label="包装号" width="180px" />
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
<el-table-column prop="qty" label="数量" width="180px" />
<el-table-column prop="uom" label="计量单位" width="180px">
<template #default="scope">
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="locationCode" label="库位代码" width="180px" />
<el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
<el-table-column prop="inventoryStatus" label="库存状态" width="180px">
<template #default="scope">
{{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
</template>
</el-table-column>
<el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
<el-table-column prop="areaCode" label="库区代码" width="180px" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
<el-table-column prop="altBatch" label="替代批次" width="180px" />
<el-table-column prop="arriveDate" label="到货日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="produceDate" label="生产日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="失效日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
<el-table-column prop="usableQty" label="可用数量" width="180px" />
<el-table-column prop="singlePrice" label="单价" width="180px" />
<el-table-column prop="amount" label="金额" width="180px" />
<el-table-column prop="putInTime" label="入库时间" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">超期库存预警</div>
<el-table
:data="materialData?.overdueBalanceList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="itemCode" label="物料代码" width="180px" />
<el-table-column prop="batch" label="批次" width="180px" />
<el-table-column prop="packingNumber" label="包装号" width="180px" />
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
<el-table-column prop="qty" label="数量" width="180px" />
<el-table-column prop="uom" label="计量单位" width="180px">
<template #default="scope">
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="locationCode" label="库位代码" width="180px" />
<el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
<el-table-column prop="inventoryStatus" label="库存状态" width="180px">
<template #default="scope">
{{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
</template>
</el-table-column>
<el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
<el-table-column prop="areaCode" label="库区代码" width="180px" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
<el-table-column prop="altBatch" label="替代批次" width="180px" />
<el-table-column prop="arriveDate" label="到货日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="produceDate" label="生产日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="失效日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
<el-table-column prop="usableQty" label="可用数量" width="180px" />
<el-table-column prop="singlePrice" label="单价" width="180px" />
<el-table-column prop="amount" label="金额" width="180px" />
<el-table-column prop="putInTime" label="入库时间" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[47.3%]">
<div class="title">高低储预警</div>
<el-table
:data="materialData?.warningBalanceList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="itemCode" label="物料代码" width="180px" />
<el-table-column prop="batch" label="批次" width="180px" />
<el-table-column prop="packingNumber" label="包装号" width="180px" />
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
<el-table-column prop="qty" label="数量" width="180px" />
<el-table-column prop="uom" label="计量单位" width="180px">
<template #default="scope">
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="locationCode" label="库位代码" width="180px" />
<el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
<el-table-column prop="inventoryStatus" label="库存状态" width="180px">
<template #default="scope">
{{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
</template>
</el-table-column>
<el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
<el-table-column prop="areaCode" label="库区代码" width="180px" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
<el-table-column prop="altBatch" label="替代批次" width="180px" />
<el-table-column prop="arriveDate" label="到货日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="produceDate" label="生产日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="失效日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
<el-table-column prop="usableQty" label="可用数量" width="180px" />
<el-table-column prop="singlePrice" label="单价" width="180px" />
<el-table-column prop="amount" label="金额" width="180px" />
<el-table-column prop="putInTime" label="入库时间" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">待处理任务</div>
<Echart :options="barOptions" :height="280" :key="lineIndex" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import * as IndexApi from '@/api/home'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { barOptions } from '../echarts-data'
const lineIndex = ref(0)
const materialData = ref()
// 获取原料管理员数据
const getMaterialData = async () => {
await IndexApi.getMaterialData().then((res) => {
materialData.value = res
getJobCharts()
})
}
const formatter = (type, dict) => {
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
return str
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
const getJobCharts = async () => {
set(
barOptionsData,
'xAxis.data',
Object.keys( materialData.value.jobCount)
)
set(barOptionsData, 'legend.data', ['待处理任务'])
set(barOptionsData, 'series', [
{
name:'待处理任务',
data: Object.values( materialData.value.jobCount),
type: 'bar',
barMaxWidth:30
}
])
lineIndex.value++
}
onMounted(async () => {
await getMaterialData()
})
</script>
<style scoped lang="scss">
.title {
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
position: relative;
padding-left: 10px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 0px;
top: 3px;
border-radius: 8px;
}
}
.data {
display: flex;
align-items: center;
justify-content: space-between;
.small-data-item {
width:25%;
height: 90px;
display: flex;
align-items: center;
border-radius: 6px;
color: white;
padding: 0px 20px;
.small-data-item-txt {
flex: 1;
div {
&:nth-child(1) {
font-size: 14px;
}
&:nth-child(2) {
font-size: 26px;
margin-top: 4px;
font-weight: bold;
span {
font-size: 14px;
padding-left: 6px;
font-weight: normal;
}
}
}
}
.img {
width: 40px;
opacity: 0.5;
}
}
.small-data-item1 {
background: linear-gradient(to left, #fd817d, #fcad80);
}
.small-data-item2 {
background: linear-gradient(to left, #46c6fa, #336bfe);
}
.small-data-item3 {
background: linear-gradient(to left, #96a6cc, #595f82);
}
.small-data-item4 {
background: linear-gradient(to left, #08dcd5, #46e2bb);
}
.small-data-item5 {
background: linear-gradient(to left, #f4c46b, #ffb313);
}
.small-data-item6 {
background: linear-gradient(to left, #6eccf8, #02acfd);
}
}
.two-row {
display: flex;
align-content: center;
justify-content: space-between;
.data1 {
background: white;
padding: 14px;
}
}
</style>

286
src/views/home/components/produce.vue
View File

@ -1,286 +0,0 @@
<!-- 生产管理员首页 -->
<template>
<div class="row">
<div class="two-row">
<div class="data1 w-[47.3%]">
<div class="title">今日生产计划</div>
<el-table
:data="produceData?.productionTodayList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="number" label="单据号" width="180" />
<el-table-column prop="displayOrder" label="顺序" width="170" />
<el-table-column prop="workshop" label="车间" width="170" />
<el-table-column prop="productionLine" label="生产线" width="170" />
<el-table-column prop="shift" label="班次" width="170" />
<el-table-column prop="team" label="班组" width="170" />
<el-table-column prop="planDate" label="计划日期" width="170"
><template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="beginTime" label="开始日期" width="170"
><template #default="scope">
<span>{{ formatDate(scope.row.beginTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="endTime" label="结束日期" width="170"
><template #default="scope">
<span>{{ formatDate(scope.row.endTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="businessType" label="业务类型" />
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">线边安全库存</div>
<el-table :data="produceData?.safeLocationList" style="width: 100%" stripe height="240px">
<el-table-column prop="code" label="代码" width="180" />
<el-table-column prop="name" label="名称" width="180" />
<el-table-column prop="warehouseCode" label="仓库代码" width="180" />
<el-table-column prop="areaCode" label="库区代码" width="180" />
<el-table-column prop="locationGroupCode" label="库位组代码" width="180" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180" />
<el-table-column prop="type" label="类型" width="180" />
<el-table-column prop="aisle" label="巷道" width="180" />
<el-table-column prop="shelf" label="货架" width="180" />
<el-table-column prop="locationRow" label="行" width="180" />
<el-table-column prop="locationColum" label="列" width="180" />
<el-table-column prop="pickPriority" label="拣料优先级" width="180" />
<el-table-column prop="maxWeight" label="最大承重" width="180" />
<el-table-column prop="maxArea" label="最大面积" width="180" />
<el-table-column prop="maxVolume" label="最大体积" width="180" />
<el-table-column prop="userGroupCode" label="用户组代码" width="180" />
<el-table-column prop="activeTime" label="生效时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireTime" label="失效时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[47.3%]">
<div class="title">待上架成品库存</div>
<el-table
:data="produceData?.productputawayJobDetailList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="number" label="单据号" width="180" />
<el-table-column prop="fromWarehouseCode" label="从仓库代码" width="180" />
<el-table-column prop="requestTime" label="申请时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.requestTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="requestDueTime" label="要求截止时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.requestDueTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="140"/>
<el-table-column prop="departmentCode" label="部门" />
<el-table-column prop="acceptUserId" label="承接人用户名" width="170" />
<el-table-column prop="acceptTime" label="承接时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.acceptTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="fromLocationTypes" label="从库位类型范围" width="170"/>
<el-table-column prop="toLocationTypes" label="到库位类型范围" width="170" />
<el-table-column prop="toWarehouseCode" label="到仓库代码" width="170"/>
<el-table-column prop="fromAreaCodes" label="从库区代码范围" width="170"/>
<el-table-column prop="toAreaCodes" label="到库区代码范围" width="170"/>
<el-table-column prop="autoComplete" label="自动完成" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.autoComplete, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowModifyLocation" label="允许修改库位" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowModifyLocation, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowModifyQty" label="允许修改数量" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowModifyQty, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowBiggerQty" label="允许大于推荐数量" width="140">
<template #default="scope">
<span>{{ formatter(scope.row.allowBiggerQty, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowSmallerQty" label="允许小于推荐数量" width="140">
<template #default="scope">
<span>{{ formatter(scope.row.allowSmallerQty, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowModifyInventoryStatus" label="允许修改库存状态" width="140">
<template #default="scope">
<span>{{
formatter(scope.row.allowModifyInventoryStatus, DICT_TYPE.TRUE_FALSE)
}}</span>
</template>
</el-table-column>
<el-table-column prop="allowContinuousScanning" label="允许连续扫描" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowContinuousScanning, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowPartialComplete" label="允许部分完成" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowPartialComplete, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowModifyBatch" label="允许修改批次" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowModifyBatch, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowModifyPackingNumber" label="允许修改箱码" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowModifyPackingNumber, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">待处理任务</div>
<Echart :options="barOptions" :height="280" :key="lineIndex" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import * as IndexApi from '@/api/home'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { barOptions } from '../echarts-data'
const lineIndex = ref(0)
const produceData = ref()
// 获取生产管理员首页数据
const getProduceData = async () => {
IndexApi.getProduceData().then((res) => {
produceData.value = res
getJobCharts()
})
}
const formatter = (type, dict) => {
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
return str
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
const getJobCharts = async () => {
set(
barOptionsData,
'xAxis.data',
Object.keys( produceData.value.jobCount)
)
set(barOptionsData, 'legend.data', ['待处理任务'])
set(barOptionsData, 'series', [
{
name:'待处理任务',
data: Object.values( produceData.value.jobCount),
type: 'bar',
barMaxWidth:30
}
])
lineIndex.value++
}
onMounted(async () => {
await getProduceData()
})
</script>
<style scoped lang="scss">
.title {
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
position: relative;
padding-left: 10px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 0px;
top: 3px;
border-radius: 8px;
}
}
.data {
display: flex;
align-items: center;
justify-content: space-between;
.small-data-item {
width: 25%;
height: 90px;
display: flex;
align-items: center;
border-radius: 6px;
color: white;
padding: 0px 20px;
.small-data-item-txt {
flex: 1;
div {
&:nth-child(1) {
font-size: 14px;
}
&:nth-child(2) {
font-size: 26px;
margin-top: 4px;
font-weight: bold;
span {
font-size: 14px;
padding-left: 6px;
font-weight: normal;
}
}
}
}
.img {
width: 40px;
opacity: 0.5;
}
}
.small-data-item1 {
background: linear-gradient(to left, #fd817d, #fcad80);
}
.small-data-item2 {
background: linear-gradient(to left, #46c6fa, #336bfe);
}
.small-data-item3 {
background: linear-gradient(to left, #96a6cc, #595f82);
}
.small-data-item4 {
background: linear-gradient(to left, #08dcd5, #46e2bb);
}
.small-data-item5 {
background: linear-gradient(to left, #f4c46b, #ffb313);
}
.small-data-item6 {
background: linear-gradient(to left, #6eccf8, #02acfd);
}
}
.two-row {
display: flex;
align-content: center;
justify-content: space-between;
.data1 {
background: white;
padding: 14px;
}
}
</style>

313
src/views/home/components/product.vue
View File

@ -1,313 +0,0 @@
<!-- 成品管理员首页 -->
<template>
<div class="row">
<div class="data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>今日到货计划(已发货)</div>
<div>{{ productData?.deliverPlanTodayCount || 0 }}<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[47.3%]">
<div class="title">呆滞库存预警</div>
<el-table
:data="productData?.stagnantBalanceList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="itemCode" label="物料代码" width="180px" />
<el-table-column prop="batch" label="批次" width="180px" />
<el-table-column prop="packingNumber" label="包装号" width="180px" />
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
<el-table-column prop="qty" label="数量" width="180px" />
<el-table-column prop="uom" label="计量单位" width="180px">
<template #default="scope">
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="locationCode" label="库位代码" width="180px" />
<el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
<el-table-column prop="inventoryStatus" label="库存状态" width="180px">
<template #default="scope">
{{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
</template>
</el-table-column>
<el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
<el-table-column prop="areaCode" label="库区代码" width="180px" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
<el-table-column prop="altBatch" label="替代批次" width="180px" />
<el-table-column prop="arriveDate" label="到货日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="produceDate" label="生产日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="失效日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
<el-table-column prop="usableQty" label="可用数量" width="180px" />
<el-table-column prop="singlePrice" label="单价" width="180px" />
<el-table-column prop="amount" label="金额" width="180px" />
<el-table-column prop="putInTime" label="入库时间" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">超期库存预警</div>
<el-table
:data="productData?.overdueBalanceList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="itemCode" label="物料代码" width="180px" />
<el-table-column prop="batch" label="批次" width="180px" />
<el-table-column prop="packingNumber" label="包装号" width="180px" />
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
<el-table-column prop="qty" label="数量" width="180px" />
<el-table-column prop="uom" label="计量单位" width="180px">
<template #default="scope">
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="locationCode" label="库位代码" width="180px" />
<el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
<el-table-column prop="inventoryStatus" label="库存状态" width="180px">
<template #default="scope">
{{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
</template>
</el-table-column>
<el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
<el-table-column prop="areaCode" label="库区代码" width="180px" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
<el-table-column prop="altBatch" label="替代批次" width="180px" />
<el-table-column prop="arriveDate" label="到货日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="produceDate" label="生产日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="失效日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
<el-table-column prop="usableQty" label="可用数量" width="180px" />
<el-table-column prop="singlePrice" label="单价" width="180px" />
<el-table-column prop="amount" label="金额" width="180px" />
<el-table-column prop="putInTime" label="入库时间" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[47.3%]">
<div class="title">高低储预警</div>
<el-table
:data="productData?.warningBalanceList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="itemCode" label="物料代码" width="180px" />
<el-table-column prop="batch" label="批次" width="180px" />
<el-table-column prop="packingNumber" label="包装号" width="180px" />
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
<el-table-column prop="qty" label="数量" width="180px" />
<el-table-column prop="uom" label="计量单位" width="180px">
<template #default="scope">
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="locationCode" label="库位代码" width="180px" />
<el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
<el-table-column prop="inventoryStatus" label="库存状态" width="180px">
<template #default="scope">
{{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
</template>
</el-table-column>
<el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
<el-table-column prop="areaCode" label="库区代码" width="180px" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
<el-table-column prop="altBatch" label="替代批次" width="180px" />
<el-table-column prop="arriveDate" label="到货日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="produceDate" label="生产日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="失效日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
<el-table-column prop="usableQty" label="可用数量" width="180px" />
<el-table-column prop="singlePrice" label="单价" width="180px" />
<el-table-column prop="amount" label="金额" width="180px" />
<el-table-column prop="putInTime" label="入库时间" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">待处理任务</div>
<Echart :options="barOptions" :height="280" :key="lineIndex" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import * as IndexApi from '@/api/home'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { barOptions } from '../echarts-data'
const lineIndex = ref(0)
// 获取成品管理员首页首页数据
const productData = ref()
const getProductData = async () => {
IndexApi.getProductData().then((res) => {
productData.value = res
getJobCharts()
})
}
const formatter = (type, dict) => {
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
return str
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
const getJobCharts = async () => {
set(
barOptionsData,
'xAxis.data',
Object.keys( productData.value.jobCount)
)
set(barOptionsData, 'legend.data', ['待处理任务'])
set(barOptionsData, 'series', [
{
name:'待处理任务',
data: Object.values( productData.value.jobCount),
type: 'bar',
barMaxWidth:30
}
])
lineIndex.value++
}
onMounted(async () => {
await getProductData()
})
</script>
<style scoped lang="scss">
.title {
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
position: relative;
padding-left: 10px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 0px;
top: 3px;
border-radius: 8px;
}
}
.data {
display: flex;
align-items: center;
justify-content: space-between;
.small-data-item {
width: 25%;
height: 90px;
display: flex;
align-items: center;
border-radius: 6px;
color: white;
padding: 0px 20px;
.small-data-item-txt {
flex: 1;
div {
&:nth-child(1) {
font-size: 14px;
}
&:nth-child(2) {
font-size: 26px;
margin-top: 4px;
font-weight: bold;
span {
font-size: 14px;
padding-left: 6px;
font-weight: normal;
}
}
}
}
.img {
width: 40px;
opacity: 0.5;
}
}
.small-data-item1 {
background: linear-gradient(to left, #fd817d, #fcad80);
}
.small-data-item2 {
background: linear-gradient(to left, #46c6fa, #336bfe);
}
.small-data-item3 {
background: linear-gradient(to left, #96a6cc, #595f82);
}
.small-data-item4 {
background: linear-gradient(to left, #08dcd5, #46e2bb);
}
.small-data-item5 {
background: linear-gradient(to left, #f4c46b, #ffb313);
}
.small-data-item6 {
background: linear-gradient(to left, #6eccf8, #02acfd);
}
}
.two-row {
display: flex;
align-content: center;
justify-content: space-between;
.data1 {
background: white;
padding: 14px;
}
}
</style>

452
src/views/home/components/supplierIndex.vue
View File

@ -1,452 +0,0 @@
<!-- 供应商首页 -->
<template>
<div class="one-row">
<div class="data">
<div class="data-item">
<div class="small-title">订单数</div>
<div class="small-data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>{{ supplierData?.openPurchaseCount || 0 }}<span>单</span></div>
<div>开放订单数</div>
</div>
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item2 ml-14px">
<div class="small-data-item-txt">
<div>{{ supplierData?.allPurchaseCount || 0 }}<span>单</span></div>
<div>全部订单数</div>
</div>
<img src="../../../assets/imgs/icon5.png" alt="" class="img" />
</div>
</div>
</div>
<div class="data-item ml-14px">
<div class="small-title">要货计划数</div>
<div class="small-data">
<div class="small-data-item small-data-item3">
<div class="small-data-item-txt">
<div>{{ supplierData?.openPurchasePlanCount || 0 }}<span>单</span></div>
<div>开放计划数</div>
</div>
<img src="../../../assets/imgs/icon6.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4 ml-14px">
<div class="small-data-item-txt">
<div>{{ supplierData?.allPurchasePlanCount || 0 }}<span>单</span></div>
<div>全部计划数</div>
</div>
<img src="../../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
</div>
<div class="data-item ml-14px">
<div class="small-title">发货单数</div>
<div class="small-data">
<div class="small-data-item small-data-item5">
<div class="small-data-item-txt">
<div>{{ supplierData?.notTakeSupplierdeliverCount || 0 }}<span>单</span></div>
<div>未收货订单数</div>
</div>
<img src="../../../assets/imgs/icon4.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item6 ml-14px">
<div class="small-data-item-txt">
<div>{{ supplierData?.takeSupplierdeliverCount || 0 }}<span>单</span></div>
<div>已收货订单数</div>
</div>
<img src="../../../assets/imgs/icon2.png" alt="" class="img" />
</div>
</div>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[65%]">
<div class="title">本月发货单趋势</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
<div class="data1 w-[35%] ml-14px">
<div class="title">本月发货零件TOP10</div>
<Echart :options="pieOptions" :height="280" :key="lineIndex" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[47.3%]">
<div class="title">最新消息</div>
<el-table :data="notaicList" style="width: 100%" stripe height="240px">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="用户类型" align="center" prop="userType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
</template>
</el-table-column>
<el-table-column label="用户编号" align="center" prop="userId" width="80" />
<el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
<el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
<el-table-column
label="模版内容"
align="center"
prop="templateContent"
width="200"
show-overflow-tooltip
/>
<el-table-column
label="模版参数"
align="center"
prop="templateParams"
width="180"
show-overflow-tooltip
>
<template #default="scope"> {{ scope.row.templateParams }}</template>
</el-table-column>
<el-table-column label="模版类型" align="center" prop="templateType" width="120">
<template #default="scope">
<dict-tag
:type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
:value="scope.row.templateType"
/>
</template>
</el-table-column>
<el-table-column label="是否已读" align="center" prop="readStatus" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
</template>
</el-table-column>
<el-table-column
label="阅读时间"
align="center"
prop="readTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<!-- <el-table-column label="操作" align="center" fixed="right" width="120">
<template #default="scope">
<el-button link type="primary" @click="openDetail(scope.row)" v-hasPermi="['system:notify-message:query']">
<Icon icon="ep:document-copy" />
详情
</el-button>
</template>
</el-table-column> -->
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">最新扣分明细</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[47.3%]">
<div class="title">本月退货明细</div>
<el-table
:data="supplierData?.purchasereturnRecordMonth"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="number" label="单据号" width="180" />
<el-table-column prop="fromPackingNumber" label="从包装号" width="180" />
<el-table-column prop="toPackingNumber" label="到包装号" width="180" />
<el-table-column prop="fromContainerNumber" label="从器具号" width="120" />
<el-table-column prop="toContainerNumber" label="到器具号" width="120" />
<el-table-column prop="fromBatch" label="从批次" width="120" />
<el-table-column prop="toBatch" label="到批次" width="120" />
<el-table-column prop="altBatch" label="替代批次" width="120" />
<el-table-column prop="fromLocationCode" label="从库位代码" width="120" />
<el-table-column prop="toLocationCode" label="到库位代码" width="120" />
<el-table-column prop="fromLocationGroupCode" label="从库位组代码" width="120" />
<el-table-column prop="toLocationGroupCode" label="到库位组代码" width="120" />
<el-table-column prop="fromAreaCode" label="从库区代码" width="120" />
<el-table-column prop="toAreaCode" label="到库区代码" width="120" />
<el-table-column prop="fromOwnerCode" label="从货主代码" width="120" />
<el-table-column prop="toOwnerCode" label="到货主代码" width="120" />
<el-table-column prop="inventoryStatus" label="库存状态" width="120">
<template #default="scope">
{{ formatter(scope.row.inventoryStatus,DICT_TYPE.INVENTORY_STATUS) }}
</template>
</el-table-column>
<el-table-column prop="poNumber" label="订单号" width="120" />
<el-table-column prop="poline" label="订单行" width="120" />
<el-table-column prop="reason" label="原因" width="120" />
<el-table-column prop="singlePrice" label="单价" width="120" />
<el-table-column prop="amount" label="金额" width="120" />
<el-table-column prop="itemCode" label="物品代码" width="160" />
<el-table-column prop="itemName" label="物品名称" width="120" />
<el-table-column prop="itemDesc1" label="物品描述1" width="120" />
<el-table-column prop="itemDesc2" label="物品描述2" width="120" />
<el-table-column prop="qty" label="数量" width="120" />
<el-table-column prop="uom" label="计量单位" width="120">
<template #default="scope">
{{ formatter(scope.row.uom,DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="projectCode" label="项目代码" width="120" />
<el-table-column prop="remark" label="备注" width="120" />
<el-table-column prop="createTime" label="创建时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="creator" label="创建者" width="120" />
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">本月索赔明细</div>
<el-table
:data="supplierData?.purchasereturnRecordMonth"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="number" label="单据号" width="180" />
<el-table-column prop="fromBatch" label="批次" width="120" />
<el-table-column prop="poNumber" label="订单号" width="120" />
<el-table-column prop="poline" label="订单行" width="120" />
<el-table-column prop="reason" label="原因" width="120" />
<el-table-column prop="singlePrice" label="单价" width="120" />
<el-table-column prop="amount" label="金额" width="120" />
<el-table-column prop="code" label="代码" width="160" />
<el-table-column prop="createTime" label="创建时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="creator" label="创建者" width="120" />
</el-table>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { lineOptions, pieOptions } from '../echarts-data'
import { formatDate } from '@/utils/formatTime'
import * as NotifyMessageApi from '@/api/system/notify/message'
import * as IndexApi from '@/api/home'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
const { t } = useI18n()
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
title: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
}
]
const supplierData = ref()
const lineIndex = ref(0)
// 本月发货单趋势
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
const getInvoiceCharts = async () => {
set(
lineOptionsData,
'xAxis.data',
supplierData.value.supplierdeliverMonthCount.map((v) => v.date)
)
set(lineOptionsData, 'legend.data', ['本月发货单趋势'])
set(lineOptionsData, 'series', [
{
name: '本月发货单趋势',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count)
}
])
lineIndex.value++
}
//本月发货零件TOP10
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
const getPartTOPCharts = async () => {
const data = [
{ value: 335, name: 'analysis.directAccess' },
{ value: 310, name: 'analysis.mailMarketing' },
{ value: 234, name: 'analysis.allianceAdvertising' },
{ value: 135, name: 'analysis.videoAdvertising' },
{ value: 1548, name: 'analysis.searchEngines' }
]
console.log(supplierData.value.supplierdeliverItemMonthTop)
set(
pieOptionsData,
'legend.data',
supplierData.value.supplierdeliverItemMonthTop.map((v) => v.itemCode)
)
pieOptionsData!.series![0].data = supplierData.value.supplierdeliverItemMonthTop.map((v) => {
return {
name: v.itemCode,
value: v.qty
}
})
lineIndex.value++
}
// 获取供应商数据
const getSupplierData = async () => {
IndexApi.getSupplierData().then((res) => {
supplierData.value = res
getInvoiceCharts()
getPartTOPCharts()
})
}
// 最新消息
const notaicList = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userType: undefined,
userId: undefined,
templateCode: undefined,
templateType: undefined,
createTime: []
})
/** 查询列表 */
const getList = async () => {
try {
const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
notaicList.value = data.list
} finally {
}
}
const formatter = (type,dict) => {
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
return str
}
onMounted(async () => {
await getSupplierData()
getList()
})
</script>
<style scoped lang="scss">
.title {
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
position: relative;
padding-left: 10px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 0px;
top: 3px;
border-radius: 8px;
}
}
.data {
display: flex;
align-items: center;
justify-content: space-between;
.data-item {
width: calc(100% / 3);
padding: 10px 0px;
background: white;
.small-title {
padding: 0px 14px 10px;
}
.small-data {
display: flex;
align-content: center;
justify-content: space-between;
padding: 0px 14px;
.small-data-item {
width: 50%;
height: 70px;
display: flex;
align-items: center;
border-radius: 6px;
color: white;
padding: 0px 20px;
.small-data-item-txt {
flex: 1;
div {
&:nth-child(1) {
font-size: 20px;
span {
font-size: 12px;
padding-left: 6px;
}
}
&:nth-child(2) {
font-size: 12px;
}
}
}
.img {
width: 30px;
opacity: 0.5;
}
}
.small-data-item1 {
background: linear-gradient(to left, #fd817d, #fcad80);
}
.small-data-item2 {
background: linear-gradient(to left, #46c6fa, #336bfe);
}
.small-data-item3 {
background: linear-gradient(to left, #96a6cc, #595f82);
}
.small-data-item4 {
background: linear-gradient(to left, #08dcd5, #46e2bb);
}
.small-data-item5 {
background: linear-gradient(to left, #f4c46b, #ffb313);
}
.small-data-item6 {
background: linear-gradient(to left, #6eccf8, #02acfd);
}
}
}
}
.two-row {
display: flex;
align-content: center;
justify-content: space-between;
.data1 {
background: white;
padding: 14px;
}
}
</style>

2
src/views/home/echarts-data.ts
View File

@ -5,7 +5,7 @@ const { t } = useI18n()
export const lineOptions: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12
],
boundaryGap: false,
axisTick: {

434
src/views/home/index.vue
View File

@ -1,14 +1,430 @@
<!-- 供应商首页 -->
<template>
<div>
<supplierIndex v-hasRole="['super_admin','supplier']"/>
<material v-hasRole="['super_admin']"/>
<product v-hasRole="['super_admin']"/>
<produce v-hasRole="['super_admin']"/>
<div class="one-row">
<div class="data">
<div class="data-item">
<div class="small-title">注塑</div>
<div class="small-data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>{{ data?.zsTJ || 0 }}<span>个</span></div>
<div>设备停机状态</div>
</div>
<img src="../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item2">
<div class="small-data-item-txt">
<div>{{ data?.zsZs || 0 }}<span>个</span></div>
<div>设备总数</div>
</div>
<img src="../../assets/imgs/icon2.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item3 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.zsWC || 0 }}</div>
<div>月设备保养完成率</div>
</div>
<img src="../../assets/imgs/icon5.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.zsTime || 0 }}<span>分钟</span></div>
<div>月汇总停机时间</div>
</div>
<img src="../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
</div>
<div class="data-item ml-14px">
<div class="small-title">装配</div>
<div class="small-data">
<div class="small-data-item small-data-item5">
<div class="small-data-item-txt">
<div>{{ data?.zpTJ || 0 }}<span>个</span></div>
<div>设备停机状态</div>
</div>
<img src="../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item6">
<div class="small-data-item-txt">
<div>{{ data?.zpZs || 0 }}<span>个</span></div>
<div>设备总数</div>
</div>
<img src="../../assets/imgs/icon2.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item7 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.zpWC || 0 }}</div>
<div>月设备保养完成率</div>
</div>
<img src="../../assets/imgs/icon5.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item8 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.zpTime || 0 }}<span>分钟</span></div>
<div>月汇总停机时间</div>
</div>
<img src="../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
</div>
<div class="data-item ml-14px">
<div class="small-title">涂装</div>
<div class="small-data">
<div class="small-data-item small-data-item3">
<div class="small-data-item-txt">
<div>{{ data?.tzTJ || 0 }}<span>个</span></div>
<div>设备停机状态</div>
</div>
<img src="../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4">
<div class="small-data-item-txt">
<div>{{ data?.tzZs || 0 }}<span>个</span></div>
<div>设备总数</div>
</div>
<img src="../../assets/imgs/icon2.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item5 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.tzWC || 0 }}</div>
<div>月设备保养完成率</div>
</div>
<img src="../../assets/imgs/icon5.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item6 mt-10px">
<div class="small-data-item-txt">
<div>{{ data?.tzTime || 0 }}<span>分钟</span></div>
<div>月汇总停机时间</div>
</div>
<img src="../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
</div>
</div>
<div class="data mt-14px">
<div class="data-item">
<div class="small-title">注塑年度指标</div>
<div class="small-data">
<div class="table-box">
<ul class="table header">
<li class="one">指标名称</li>
<li class="two">目标</li>
<li class="three">实际</li>
</ul>
<ul class="table ul-body">
<li class="one">设备停机率</li>
<li class="two orange">0.05%</li>
<li class="three green">0</li>
</ul>
<ul class="table ul-body">
<li class="one">平均故障回复时间</li>
<li class="two orange">20</li>
<li class="three green">0</li>
</ul>
<ul class="table ul-body">
<li class="one">平均故障间隔时间</li>
<li class="two orange">20</li>
<li class="three green">0</li>
</ul>
</div>
</div>
</div>
<div class="data-item ml-14px">
<div class="small-title">装配年度指标</div>
<div class="small-data">
<div class="table-box">
<ul class="table header">
<li class="one">指标名称</li>
<li class="two">目标</li>
<li class="three">实际</li>
</ul>
<ul class="table ul-body">
<li class="one">设备停机率</li>
<li class="two orange">0.05%</li>
<li class="three green">0</li>
</ul>
<ul class="table ul-body">
<li class="one">平均故障回复时间</li>
<li class="two orange">20</li>
<li class="three green">0</li>
</ul>
<ul class="table ul-body">
<li class="one">平均故障间隔时间</li>
<li class="two orange">20</li>
<li class="three green">0</li>
</ul>
</div>
</div>
</div>
<div class="data-item ml-14px">
<div class="small-title">涂装年度指标</div>
<div class="small-data">
<div class="table-box">
<ul class="table header">
<li class="one">指标名称</li>
<li class="two">目标</li>
<li class="three">实际</li>
</ul>
<ul class="table ul-body">
<li class="one">设备停机率</li>
<li class="two orange">0.05%</li>
<li class="three green">0</li>
</ul>
<ul class="table ul-body">
<li class="one">平均故障回复时间</li>
<li class="two orange">20</li>
<li class="three green">0</li>
</ul>
<ul class="table ul-body">
<li class="one">平均故障间隔时间</li>
<li class="two orange">20</li>
<li class="three green">0</li>
</ul>
</div>
</div>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1">
<div class="title">注塑设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">装配设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">涂装设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1">
<div class="title">注塑设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">装配设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">涂装设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1">
<div class="title">注塑设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">装配设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
<div class="data1 ml-14px">
<div class="title">涂装设备停机率</div>
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import supplierIndex from './components/supplierIndex.vue'
import material from './components/material.vue'
import product from './components/product.vue'
import produce from './components/produce.vue'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { lineOptions, pieOptions } from './echarts-data'
import * as IndexApi from '@/api/home'
const { t } = useI18n()
const data = ref()
const lineIndex = ref(0)
// 本月发货单趋势
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
const getInvoiceCharts = async () => {
// set(
// lineOptionsData,
// 'xAxis.data',
// supplierData.value.supplierdeliverMonthCount.map((v) => v.date)
// )
set(lineOptionsData, 'legend.data',['销售','哈哈'])
set(lineOptionsData, 'series', [
{
name: '注塑设备停机率',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count)
}
])
lineIndex.value++
}
// 首页获取设备停机状态/设备总数/月设备保养完成率/月汇总停机时间
function getData(){
IndexApi.getData().then((res)=>{
data.value = res
console.log(res)
})
}
onMounted(async () => {
// getInvoiceCharts()
getData()
})
</script>
<style scoped lang="scss">
.title {
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
position: relative;
padding-left: 10px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 0px;
top: 3px;
border-radius: 8px;
}
}
.data {
display: flex;
align-items: center;
justify-content: space-between;
.data-item {
width: calc(100% / 3);
padding: 10px 0px;
background: white;
.small-title {
padding-bottom: 10px;
position: relative;
padding-left: 25px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 15px;
top: 3px;
border-radius: 8px;
}
}
.small-data {
display: flex;
align-content: center;
justify-content: space-between;
padding: 0px 14px;
flex-wrap: wrap;
.small-data-item {
width: calc(50% - 46px);
height: 70px;
display: flex;
align-items: center;
border-radius: 6px;
color: white;
padding: 0px 20px;
.small-data-item-txt {
flex: 1;
div {
&:nth-child(1) {
font-size: 20px;
span {
font-size: 12px;
padding-left: 6px;
}
}
&:nth-child(2) {
font-size: 12px;
}
}
}
.img {
width: 30px;
opacity: 0.5;
}
}
.small-data-item1 {
background: linear-gradient(to left, #fd817d, #fcad80);
}
.small-data-item2 {
background: linear-gradient(to left, #46c6fa, #336bfe);
}
.small-data-item3 {
background: linear-gradient(to left, #96a6cc, #595f82);
}
.small-data-item4 {
background: linear-gradient(to left, #08dcd5, #46e2bb);
}
.small-data-item5 {
background: linear-gradient(to left, #f4c46b, #ffb313);
}
.small-data-item6 {
background: linear-gradient(to left, #cad0fc, #97a2fa);
}
.small-data-item7 {
background: linear-gradient(to left, #fcc7c7, #ff8888);
}
.small-data-item8 {
background: linear-gradient(to left, #6eccf8, #02acfd);
}
}
}
}
.two-row {
display: flex;
align-content: center;
justify-content: space-between;
.data1 {
background: white;
padding: 14px;
width: calc(100% /3);
}
}
.table-box{
border: 1px solid #dedede;
width: 100%;
}
.table {
list-style: none;
padding: 0px;
width: 100%;
}
.header {
display: flex;
background: #f5f5f5;
margin: 0px;
li {
width: 25%;
text-align: center;
padding: 10px;
}
.one {
width: 50%;
}
}
.ul-body {
display: flex;
margin: 0px;
li {
width: 25%;
text-align: center;
padding: 10px;
}
.one {
width: 50%;
}
.green {
color: #18bb43;
font-size: 18px;
font-weight: bold;
}
.orange {
color: #ffb062;
font-size: 18px;
font-weight: bold;
}
}
</style>

Write Preview
Loading…
Cancel
Save