ljlong_2630 8 months ago
parent
commit
441c81e31f
  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. 339
      src/views/eam/device/deviceAccounts/index.vue
  7. 171
      src/views/eam/device/deviceInternalAudit/deviceInternalAudit.data.ts
  8. 21
      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

@ -55,3 +55,9 @@ export const importTemplate = () => {
export const replaceLocation = async (data: Array<ItemAccountsVO>) => { export const replaceLocation = async (data: Array<ItemAccountsVO>) => {
return await request.post({url: `/eam/item-accounts/replaceLocation `, data }); 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

@ -1,22 +1,8 @@
import request from '@/config/axios' import request from '@/config/axios'
// 供应商首页 // 首页获取设备停机状态/设备总数/月设备保养完成率/月汇总停机时间
// export const getSupplierData = async () => { export const getData = async () => {
// return await request.get({ url: `/wms/index/indexSupplier` }) 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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/imgs/icon2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 21 KiB

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

@ -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 searchTableRef = ref()
/** 绑定备件操作 */ /** 绑定备件操作 */
const openItem = async (number : String) => { const openItem = async (number : String) => {

339
src/views/eam/device/deviceAccounts/index.vue

@ -1,36 +1,20 @@
<template> <template>
<ContentWrap> <ContentWrap>
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<Search <Search :schema="DeviceAccounts.allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
:schema="DeviceAccounts.allSchemas.searchSchema"
@search="setSearchParams"
@reset="setSearchParams"
/>
</ContentWrap> </ContentWrap>
<!-- 列表头部 --> <!-- 列表头部 -->
<TableHead <TableHead :HeadButttondata="HeadButttondata" @button-base-click="buttonBaseClick" :routeName="routeName"
:HeadButttondata="HeadButttondata" @updataTableColumns="updataTableColumns" @searchFormClick="searchFormClick"
@button-base-click="buttonBaseClick" :allSchemas="DeviceAccounts.allSchemas" />
:routeName="routeName"
@updataTableColumns="updataTableColumns"
@searchFormClick="searchFormClick"
:allSchemas="DeviceAccounts.allSchemas"
/>
<!-- 列表 --> <!-- 列表 -->
<ContentWrap> <ContentWrap>
<Table <Table :columns="tableColumns" :data="tableObject.tableList" :loading="tableObject.loading" :pagination="{
:columns="tableColumns"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{
total: tableObject.total total: tableObject.total
}" }" v-model:pageSize="tableObject.pageSize" v-model:currentPage="tableObject.currentPage"
v-model:pageSize="tableObject.pageSize" v-model:sort="tableObject.sort">
v-model:currentPage="tableObject.currentPage"
v-model:sort="tableObject.sort"
>
<template #number="{ row }"> <template #number="{ row }">
<el-button type="primary" link @click="openDetail(row, '编号', row.number)"> <el-button type="primary" link @click="openDetail(row, '编号', row.number)">
<span>{{ row.number }}</span> <span>{{ row.number }}</span>
@ -43,128 +27,104 @@
</ContentWrap> </ContentWrap>
<!-- 表单弹窗添加/修改 --> <!-- 表单弹窗添加/修改 -->
<BasicForm <BasicForm ref="basicFormRef" @success="formsSuccess" :rules="DeviceAccountsRules"
ref="basicFormRef" :formAllSchemas="DeviceAccounts.allSchemas" :apiUpdate="DeviceAccountsApi.updateDeviceAccounts"
@success="formsSuccess" :apiCreate="DeviceAccountsApi.createDeviceAccounts" @searchTableSuccess="searchTableSuccess" :isBusiness="false" />
:rules="DeviceAccountsRules"
:formAllSchemas="DeviceAccounts.allSchemas"
:apiUpdate="DeviceAccountsApi.updateDeviceAccounts"
:apiCreate="DeviceAccountsApi.createDeviceAccounts"
@searchTableSuccess="searchTableSuccess"
:isBusiness="false"
/>
<SearchTable ref="searchTableRef" @onMountedCallBack="onMountedCallBack" @searchTableSuccess="submitItem" /> <SearchTable ref="searchTableRef" @onMountedCallBack="onMountedCallBack" @searchTableSuccess="submitItem" />
<!-- 详情 --> <!-- 详情 -->
<DetailDeviceLedger <DetailDeviceLedger ref="detailRef" :tabs="DeviceLedgerTabsList" :subTabs="DeviceLedgerSubTabsList" :isBasic="true"
ref="detailRef" :allSchemas="allSchemas" @changeTabs="changeTabs" :detailAllSchemas="detailAllSchemas" :apiPage="apiPage"
:tabs="DeviceLedgerTabsList" :tabsExtend="tabsExtend" :tabName="tabName" :tableObjectExtend="tableObjectExtend" :getImageApi="uploadApi.getImage"
:subTabs="DeviceLedgerSubTabsList" :uploadImage="uploadApi.uploadImage" :defaultParams="defaultParams" :dialogApiPage="dialogApiPage"
:isBasic="true" :dialogAllSchemas="dialogAllSchemas" />
: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 <ImportForm ref="importFormRef" url="/eam/device-accounts/import" :importTemplateData="importTemplateData"
ref="importFormRef" @success="importSuccess" />
url="/eam/device-accounts/import"
:importTemplateData="importTemplateData"
@success="importSuccess"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import download from '@/utils/download' import download from '@/utils/download'
import { import {
DeviceAccounts, DeviceAccounts,
DeviceAccountsRules, DeviceAccountsRules,
} from './deviceAccounts.data' } from './deviceAccounts.data'
import { Item } from '@/views/eam/basic/item/item.data' import { Item } from '@/views/eam/basic/item/item.data'
import * as ItemApi from '@/api/eam/basic/item' import * as ItemApi from '@/api/eam/basic/item'
import { createDeviceItemBatch, getDeviceItemPage,getDeviceItemNoPage } from '@/api/eam/basic/rel' import { createDeviceItemBatch, getDeviceItemPage, getDeviceItemNoPage } from '@/api/eam/basic/rel'
import * as DeviceAccountsApi from '@/api/eam/device/deviceAccounts' import * as DeviceAccountsApi from '@/api/eam/device/deviceAccounts'
import * as defaultButtons from '@/utils/disposition/defaultButtons' import * as defaultButtons from '@/utils/disposition/defaultButtons'
import { DeviceLedgerTabsList } from '@/utils/disposition/tabsList' import { DeviceLedgerTabsList } from '@/utils/disposition/tabsList'
import TableHead from '@/components/TableHead/src/TableHead.vue' import TableHead from '@/components/TableHead/src/TableHead.vue'
import ImportForm from '@/components/ImportForm/src/ImportForm.vue' import ImportForm from '@/components/ImportForm/src/ImportForm.vue'
import DetailDeviceLedger from '@/components/Detail/src/DetailDeviceLedger.vue' import DetailDeviceLedger from '@/components/Detail/src/DetailDeviceLedger.vue'
import { DeviceRepair } from '@/views/eam/device/deviceRepair/deviceRepair.data' import { DeviceRepair } from '@/views/eam/device/deviceRepair/deviceRepair.data'
import { DeviceItem } from '@/views/eam/basic/deviceItem/deviceItem.data' import { DeviceItem } from '@/views/eam/basic/deviceItem/deviceItem.data'
import * as deviceRepairApi from '@/api/eam/device/deviceRepair' import * as deviceRepairApi from '@/api/eam/device/deviceRepair'
import * as uploadApi from '@/api/eam/upload' import * as uploadApi from '@/api/eam/upload'
import * as DeviceMaintainOrderMainApi from '@/api/eam/device/deviceMaintainOrderMain' import * as DeviceMaintainOrderMainApi from '@/api/eam/device/deviceMaintainOrderMain'
import * as DeviceMaintainOrderDetailApi from '@/api/eam/device/deviceMaintainOrderDetail' import * as DeviceMaintainOrderDetailApi from '@/api/eam/device/deviceMaintainOrderDetail'
import * as DeviceMaintenanceMainApi from '@/api/eam/device/deviceMaintenanceMain' import * as DeviceMaintenanceMainApi from '@/api/eam/device/deviceMaintenanceMain'
import * as deviceMaintenanceDetailApi from '@/api/eam/device/deviceMaintenanceDetail' import * as deviceMaintenanceDetailApi from '@/api/eam/device/deviceMaintenanceDetail'
import { getAccessToken } from '@/utils/auth' import { getAccessToken } from '@/utils/auth'
import { import {
DeviceMaintainOrderMain, DeviceMaintainOrderMain,
DeviceMaintainOrderDetail, DeviceMaintainOrderDetail,
} from '../devicemaintainjob/deviceMaintainOrderMain.data' } from '../devicemaintainjob/deviceMaintainOrderMain.data'
import { import {
DeviceMaintenanceMain, DeviceMaintenanceMain,
DeviceMaintenanceDetail DeviceMaintenanceDetail
} from '../devicemaintenancejob/deviceMaintenanceMain.data' } from '../devicemaintenancejob/deviceMaintenanceMain.data'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
defineOptions({ name: 'DeviceAccounts' }) defineOptions({ name: 'DeviceAccounts' })
const message = useMessage() // const message = useMessage() //
const { t } = useI18n() // const { t } = useI18n() //
const route = useRoute() // const route = useRoute() //
const routeName = ref() const routeName = ref()
const deviceNumber = ref() const deviceNumber = ref()
routeName.value = route.name routeName.value = route.name
const tableColumns = ref(DeviceAccounts.allSchemas.tableColumns) const tableColumns = ref(DeviceAccounts.allSchemas.tableColumns)
const allSchemas = ref(DeviceAccounts.allSchemas) const allSchemas = ref(DeviceAccounts.allSchemas)
const detailAllSchemas = ref() const detailAllSchemas = ref()
const apiPage = ref() const apiPage = ref()
const itemCodeRow = ref() const itemCodeRow = ref()
const tableObjectExtend = ref() const tableObjectExtend = ref()
const defaultParams = ref({}) const defaultParams = ref({})
const dialogApiPage = ref() const dialogApiPage = ref()
const dialogAllSchemas = ref() const dialogAllSchemas = ref()
const BASE_URL = import.meta.env.VITE_JMREPORT_BASE_URL const BASE_URL = import.meta.env.VITE_JMREPORT_BASE_URL
const src = ref(BASE_URL + '/jmreport/view/924818618605031424?token=' + getAccessToken()) const src = ref(BASE_URL + '/jmreport/view/924818618605031424?token=' + getAccessToken())
// //
const searchTableSuccess = (formField, searchField, val, formRef) => { const searchTableSuccess = (formField, searchField, val, formRef) => {
nextTick(() => { nextTick(() => {
const setV = {} const setV = {}
setV[formField] = val[0][searchField] setV[formField] = val[0][searchField]
formRef.setValues(setV) formRef.setValues(setV)
}) })
} }
// //
const updataTableColumns = (val) => { const updataTableColumns = (val) => {
tableColumns.value = val tableColumns.value = val
} }
const { tableObject, tableMethods } = useTable({ const { tableObject, tableMethods } = useTable({
getListApi: DeviceAccountsApi.getDeviceAccountsPage // getListApi: DeviceAccountsApi.getDeviceAccountsPage //
}) })
// //
const { getList, setSearchParams } = tableMethods const { getList, setSearchParams } = tableMethods
// //
const HeadButttondata = [ const HeadButttondata = [
defaultButtons.defaultAddBtn(null), // defaultButtons.defaultAddBtn(null), //
defaultButtons.selectQrCodeBatchBtn(null), // defaultButtons.selectQrCodeBatchBtn(null), //
// defaultButtons.defaultImportBtn(null), // // defaultButtons.defaultImportBtn(null), //
@ -180,10 +140,10 @@ const HeadButttondata = [
// icon: 'Select', // icon: 'Select',
// color: '' // color: ''
// }, // },
] ]
// //
const buttonBaseClick = (val, item) => { const buttonBaseClick = (val, item) => {
if (val == 'add') { if (val == 'add') {
// //
openForm('create') openForm('create')
@ -205,21 +165,21 @@ const buttonBaseClick = (val, item) => {
// //
console.log('其他按钮', item) console.log('其他按钮', item)
} }
} }
// - // -
const butttondata = [ const butttondata = [
defaultButtons.mainListEditBtn(null), // defaultButtons.mainListEditBtn(null), //
// defaultButtons.mainListDeleteBtn(null), // // defaultButtons.mainListDeleteBtn(null), //
defaultButtons.selectQrCodeBtn(null), // defaultButtons.selectQrCodeBtn(null), //
defaultButtons.selectItemBtn(null) // defaultButtons.selectItemBtn(null) //
] ]
// - // -
const buttonTableClick = async (val, row) => { const buttonTableClick = async (val, row) => {
if (val == 'edit') { if (val == 'edit') {
// //
openForm('update', row) openForm('update', row)
@ -234,19 +194,19 @@ const buttonTableClick = async (val, row) => {
// //
console.log('其他按钮', val, row) console.log('其他按钮', val, row)
} }
} }
/** 添加/修改操作 */ /** 添加/修改操作 */
const basicFormRef = ref() const basicFormRef = ref()
const openForm = (type: string, row?: any) => { const openForm = (type : string, row ?: any) => {
basicFormRef.value.open(type, row) basicFormRef.value.open(type, row)
} }
// form // form
const formsSuccess = async (formType, data) => { const formsSuccess = async (formType, data) => {
var isHave = DeviceAccounts.allSchemas.formSchema.some(function (item) { var isHave = DeviceAccounts.allSchemas.formSchema.some(function (item) {
return item.field === 'activeTime' || item.field === 'expireTime' return item.field === 'activeTime' || item.field === 'expireTime'
}) })
@ -267,18 +227,18 @@ const formsSuccess = async (formType, data) => {
} }
basicFormRef.value.dialogVisible = false basicFormRef.value.dialogVisible = false
getList() getList()
} }
/** 详情操作 */ /** 详情操作 */
const detailRef = ref() const detailRef = ref()
const openDetail = (row: any, titleName: any, titleValue: any) => { const openDetail = (row : any, titleName : any, titleValue : any) => {
itemCodeRow.value = row.number itemCodeRow.value = row.number
tabsExtend.value = 1 tabsExtend.value = 1
detailRef.value.openDetail(row, titleName, titleValue, 'basicDeviceAccounts') detailRef.value.openDetail(row, titleName, titleValue, 'basicDeviceAccounts')
} }
/** 删除按钮操作 */ /** 删除按钮操作 */
const handleDelete = async (id: number) => { const handleDelete = async (id : number) => {
try { try {
// //
await message.delConfirm() await message.delConfirm()
@ -287,12 +247,12 @@ const handleDelete = async (id: number) => {
message.success(t('common.delSuccess')) message.success(t('common.delSuccess'))
// //
await getList() await getList()
} catch {} } catch { }
} }
/** 导出按钮操作 */ /** 导出按钮操作 */
const exportLoading = ref(false) // const exportLoading = ref(false) //
const handleExport = async () => { const handleExport = async () => {
try { try {
// //
await message.exportConfirm() await message.exportConfirm()
@ -304,38 +264,38 @@ const handleExport = async () => {
} finally { } finally {
exportLoading.value = false exportLoading.value = false
} }
} }
/** 导入 */ /** 导入 */
const importFormRef = ref() const importFormRef = ref()
const handleImport = () => { const handleImport = () => {
importFormRef.value.open() importFormRef.value.open()
} }
// //
const importTemplateData = reactive({ const importTemplateData = reactive({
templateUrl: '', templateUrl: '',
templateTitle: '设备台账导入模版.xlsx' templateTitle: '设备台账导入模版.xlsx'
}) })
// //
const importSuccess = () => { const importSuccess = () => {
getList() getList()
} }
// //
const searchFormClick = (searchData) => { const searchFormClick = (searchData) => {
tableObject.params = { tableObject.params = {
isSearch: true, isSearch: true,
filters: searchData.filters filters: searchData.filters
} }
getList() // getList() //
} }
const DeviceLedgerSubTabsList = getStrDictOptions(DICT_TYPE.DEVICE_DOC_TYPE) const DeviceLedgerSubTabsList = getStrDictOptions(DICT_TYPE.DEVICE_DOC_TYPE)
const tabsExtend = ref() const tabsExtend = ref()
const tabName = ref() const tabName = ref()
const funcCode = ref('device_mould_picture') const funcCode = ref('device_mould_picture')
// tabs // tabs
const changeTabs = (item) => { const changeTabs = (item) => {
if (item.prop == 'Image') { if (item.prop == 'Image') {
tabsExtend.value = 1 tabsExtend.value = 1
tabName.value = item.label tabName.value = item.label
@ -397,17 +357,17 @@ const changeTabs = (item) => {
value: itemCodeRow.value value: itemCodeRow.value
} }
] ]
} }
/** 初始化 **/ /** 初始化 **/
onMounted(async () => { onMounted(async () => {
getList() getList()
importTemplateData.templateUrl = await DeviceAccountsApi.importTemplate() importTemplateData.templateUrl = await DeviceAccountsApi.importTemplate()
}) })
/** 二维码 */ /** 二维码 */
const openQrCode = async (number: String) => { const openQrCode = async (number : String) => {
// const data = await DeviceAccountsApi.getQrCode(number) // const data = await DeviceAccountsApi.getQrCode(number)
// const url = window.URL.createObjectURL(new Blob([data])) // const url = window.URL.createObjectURL(new Blob([data]))
// const link = document.createElement('a') // const link = document.createElement('a')
@ -425,11 +385,11 @@ const openQrCode = async (number: String) => {
// // // //
// await getList() // await getList()
// } catch {} // } catch {}
} }
const searchTableRef = ref() const searchTableRef = ref()
/** 绑定备件操作 */ /** 绑定备件操作 */
const openItem = async (number: String) => { const openItem = async (number : String) => {
deviceNumber.value = number deviceNumber.value = number
await CallBack1() await CallBack1()
searchTableRef.value.open( searchTableRef.value.open(
@ -445,9 +405,9 @@ const openItem = async (number: String) => {
null, null,
searchTableSelections.value searchTableSelections.value
) )
} }
const submitItem = async (formFieldRef, searchFieldRef, selections, typeRef, rowRef) => { const submitItem = async (formFieldRef, searchFieldRef, selections, typeRef, rowRef) => {
const deviceItemRelList = selections.map((element) => ({ const deviceItemRelList = selections.map((element) => ({
deviceNumber: deviceNumber.value, deviceNumber: deviceNumber.value,
itemNumber: element.number itemNumber: element.number
@ -456,21 +416,21 @@ const submitItem = async (formFieldRef, searchFieldRef, selections, typeRef, row
console.log('res', res) console.log('res', res)
}) })
console.log('deviceItemRelList', deviceItemRelList) console.log('deviceItemRelList', deviceItemRelList)
} }
const getDeviceItemBindData = async (params) => { const getDeviceItemBindData = async (params) => {
const response = await getDeviceItemPage(params); const response = await getDeviceItemPage(params);
return response?.data; return response?.data;
} }
const qrCodeBatch = async (val,item) => { const qrCodeBatch = async (val, item) => {
const qrCodeList = tableObject.tableList.map(item => `'${item?.number}'`).join(', ') const qrCodeList = tableObject.tableList.map(item => `'${item?.number}'`).join(', ')
window.open(src.value + "&number=" + qrCodeList) window.open(src.value + "&number=" + qrCodeList)
} }
const searchTableSelections = ref([]) const searchTableSelections = ref([])
const CallBack1 = async () => { const CallBack1 = async () => {
await getDeviceItemNoPage({ deviceNumber: deviceNumber.value }).then(async(res) => { await getDeviceItemNoPage({ deviceNumber: deviceNumber.value }).then(async (res) => {
await ItemApi.getItemNoPage().then(response => { await ItemApi.getItemNoPage().then(response => {
searchTableSelections.value = response.filter(element => { searchTableSelections.value = response.filter(element => {
let flag = false; let flag = false;
@ -483,6 +443,5 @@ const CallBack1 = async () => {
}); });
}); });
}); });
}; };
</script> </script>

171
src/views/eam/device/deviceInternalAudit/deviceInternalAudit.data.ts

@ -3,8 +3,36 @@ import { dateFormatter } from '@/utils/formatTime'
// 表单校验 // 表单校验
export const DeviceInternalAuditRules = reactive({ export const DeviceInternalAuditRules = reactive({
number: [required], personer: [
personer: [required], { 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[]>([ export const DeviceInternalAudit = useCrudSchemas(reactive<CrudSchema[]>([
@ -30,92 +58,207 @@ export const DeviceInternalAudit = useCrudSchemas(reactive<CrudSchema[]>([
label: '装配', label: '装配',
field: 'fitOut', field: 'fitOut',
sort: 'custom', sort: 'custom',
isSearch: false, table: {
width: 150
},
form: { form: {
component: 'InputNumber', component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
} }
}, },
{ {
label: '涂装', label: '涂装',
field: 'coating', field: 'coating',
sort: 'custom', sort: 'custom',
isSearch: false, table: {
width: 150
},
form: { form: {
component: 'InputNumber', component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
} }
}, },
{ {
label: '注塑', label: '注塑',
field: 'injectionMolding', field: 'injectionMolding',
sort: 'custom', sort: 'custom',
isSearch: false, table: {
width: 150
},
form: { form: {
component: 'InputNumber', component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
} }
}, },
{ {
label: '商务', label: '商务',
field: 'business', field: 'business',
sort: 'custom', sort: 'custom',
isSearch: false, table: {
width: 150
},
form: { form: {
component: 'InputNumber', component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
} }
}, },
{ {
label: '实验室', label: '实验室',
field: 'laboratory', field: 'laboratory',
sort: 'custom', sort: 'custom',
isSearch: false,
table: { table: {
width: 150, width: 150
}, },
form: { form: {
component: 'InputNumber', component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
} }
}, },
{ {
label: 'IT', label: 'IT',
field: 'it', field: 'it',
sort: 'custom', sort: 'custom',
isSearch: false, table: {
width: 150
},
form: { form: {
component: 'InputNumber', component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
} }
}, },
{ {
label: '质量保障部', label: '质量保障部',
field: 'qualityDepartment', field: 'qualityDepartment',
sort: 'custom', sort: 'custom',
isSearch: false,
table: { table: {
width: 180, width: 150
}, },
form: { form: {
component: 'InputNumber', component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
} }
}, },
{ {
label: '物流', label: '物流',
field: 'materialFlow', field: 'materialFlow',
sort: 'custom', sort: 'custom',
isSearch: false, table: {
width: 150
},
form: { form: {
component: 'InputNumber', component: 'InputNumber',
componentProps: {
min: 0,
max: 200,
precision: 0
}
},
tableForm: {
type: 'InputNumber',
min: 0,
max: 200,
precision: 0
} }
}, },
{ {
label: '模具前期', label: '模具前期',
field: 'moldPre', field: 'moldPre',
sort: 'custom', sort: 'custom',
isSearch: false,
table: { table: {
width: 150, width: 150
}, },
form: { form: {
component: 'InputNumber', 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: '描述', label: '描述',
field: 'describes', field: 'describes',

21
src/views/eam/item/itemAccounts/index.vue

@ -143,7 +143,7 @@
searchTableRef.value.open( searchTableRef.value.open(
'选择备件', '选择备件',
Item.allSchemas, Item.allSchemas,
getDeviceItemList, ItemApi.getItemPage,
null, null,
Item.allSchemas.searchSchema, Item.allSchemas.searchSchema,
true, true,
@ -153,13 +153,11 @@
null null
) )
} }
const submitItem = async (formFieldRef, searchFieldRef, selections, typeRef, rowRef) => { const submitItem = async (formFieldRef, searchFieldRef, selections, typeRef, rowRef) => {
const deviceItemRelList = selections.map((element) => ({ const deviceItemRelList = selections.map((element) => ({
id: wantId1.value, id: wantId1.value,
locationNumber: locationNumber.value, locationNumber: locationNumber.value,
itemNumber: element.number, itemNumber: element.number,
})) }))
ItemAccountsApi.replaceLocation(deviceItemRelList).then((res) => { ItemAccountsApi.replaceLocation(deviceItemRelList).then((res) => {
message.success(t('更换成功')) 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 basicFormRef = ref()
const openForm = (type : string, row ?: any) => { const openForm = (type : string, row ?: any) => {

381
src/views/home/Index copy.vue

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -5,7 +5,7 @@ const { t } = useI18n()
export const lineOptions: EChartsOption = { export const lineOptions: EChartsOption = {
xAxis: { 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, boundaryGap: false,
axisTick: { axisTick: {

434
src/views/home/index.vue

@ -1,14 +1,430 @@
<!-- 供应商首页 -->
<template> <template>
<div> <div class="one-row">
<supplierIndex v-hasRole="['super_admin','supplier']"/> <div class="data">
<material v-hasRole="['super_admin']"/> <div class="data-item">
<product v-hasRole="['super_admin']"/> <div class="small-title">注塑</div>
<produce v-hasRole="['super_admin']"/> <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> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import supplierIndex from './components/supplierIndex.vue' import { set } from 'lodash-es'
import material from './components/material.vue' import { EChartsOption } from 'echarts'
import product from './components/product.vue' import { lineOptions, pieOptions } from './echarts-data'
import produce from './components/produce.vue' 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> </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>

Loading…
Cancel
Save