Browse Source

首页/出入库记录

master
xuhuajiao 1 week ago
parent
commit
bd7f7f756d
  1. 2
      public/static/config.js
  2. 13
      src/api/asset/index.js
  3. 491
      src/views/assetManage/inOutLog/index.vue
  4. 219
      src/views/assetManage/inventory/index.vue
  5. 27
      src/views/dashboard/PanelGroup.vue
  6. 131
      src/views/home.vue

2
public/static/config.js

@ -1,5 +1,5 @@
window.g = { window.g = {
AXIOS_TIMEOUT: 10000, AXIOS_TIMEOUT: 10000,
ApiUrl: 'http://192.168.99.72:15000', // 配置服务器地址
ApiUrl: 'http://172.17.162.10:15000', // 配置服务器地址
ApiWebRtcServerUrl: '127.0.0.1:8000', // 配置监控视频服务器地址 ApiWebRtcServerUrl: '127.0.0.1:8000', // 配置监控视频服务器地址
} }

13
src/api/asset/index.js

@ -17,7 +17,6 @@ export function FetchAssetInfoDetailsByMark(params) {
}) })
} }
// 新增盘点单 // 新增盘点单
export function add(data) { export function add(data) {
return request({ return request({
@ -53,11 +52,21 @@ export function FetchDeleteStockTake(ids) {
}) })
} }
// 根据照片id删除
export function FetchDeleteAssetInfoPhotoById(ids) {
return request({
url: 'api/asset/deleteAssetInfoPhotoById',
method: 'post',
data: ids
})
}
export default { export default {
FetchInitAssetInfo, FetchInitAssetInfo,
add, add,
FetchAssetInfoDetailsByMark, FetchAssetInfoDetailsByMark,
FetchStockTakeDetailsByTaskId, FetchStockTakeDetailsByTaskId,
FetchStockSettle, FetchStockSettle,
FetchDeleteStockTake
FetchDeleteStockTake,
FetchDeleteAssetInfoPhotoById
} }

491
src/views/assetManage/inOutLog/index.vue

@ -0,0 +1,491 @@
<template>
<div class="app-container row-container">
<div class="head-container">
<div v-if="crud.props.searchToggle" class="head-search">
<!-- 搜索 -->
<el-input
v-model="keyWord"
size="small"
clearable
placeholder="请输入出入库单号搜索"
style="width: 300px;"
class="input-prepend filter-item"
@clear="crud.toQuery"
@keyup.enter.native="crud.toQuery"
>
<el-select slot="prepend" v-model="optionVal" style="width: 92px" @change="searchChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-input>
<el-select v-model="query.status" clearable size="small" placeholder="状态" class="filter-item" style="width: 120px" @change="crud.toQuery">
<i slot="prefix" class="iconfont icon-zhuangtai" />
<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
<el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
</div>
<crudOperation :permission="permission">
<template v-slot:middle>
<el-button :loading="crud.downloadLoading" size="mini" :disabled="crud.selections.length === 0" @click="doExport(crud.selections)">
<i class="iconfont icon-daochu" />
导出
</el-button>
</template>
</crudOperation>
</div>
<div class="container-wrap">
<span class="right-top-line" />
<span class="left-bottom-line" />
<el-table
ref="table"
v-loading="crud.loading"
class="archives-table"
highlight-current-row
stripe
style="width: 100%;"
height="calc(100vh - 330px)"
:data="crud.data"
@selection-change="crud.selectionChangeHandler"
@row-click="clickRowHandler"
@row-dblclick="handleRowDblClick"
>
<!-- <el-table-column type="selection" align="center" width="55" /> -->
<el-table-column prop="type" label="类型" />
<el-table-column prop="billNo" label="任务单号" min-width="180px" :show-overflow-tooltip="true" />
<el-table-column prop="warehouseName" label="所属市州" />
<el-table-column prop="stockNum" label="关联单号" />
<el-table-column prop="stockNum" label="申请人" />
<el-table-column prop="stockNum" label="申请部门" />
<el-table-column prop="takeDate" label="创建时间" width="150px">
<template slot-scope="scope">
<div>{{ scope.row.takeDate | parseTime }}</div>
</template>
</el-table-column>
<el-table-column prop="takeStart" label="入库开始时间" width="150px">
<template slot-scope="scope">
<div>{{ scope.row.takeStart | parseTime }}</div>
</template>
</el-table-column>
<el-table-column prop="takeEnd" label="入库结束时间" width="150px">
<template slot-scope="scope">
<div>{{ scope.row.takeEnd | parseTime }}</div>
</template>
</el-table-column>
<el-table-column prop="stockNum" label="总金额" />
<el-table-column prop="stockNum" label="总数量" />
<el-table-column prop="stockNum" label="异常数量" />
<el-table-column prop="status" label="状态" align="center" min-width="100px">
<template slot-scope="scope">
<span v-if="(scope.row.status || '').toString().trim() === '0'" class="row-state row-lending ">未盘点</span>
<span v-if="(scope.row.status || '').toString().trim() === '-1'" class="row-state row-lending state-active">已终止</span>
<span v-if="(scope.row.status || '').toString().trim() === '1'" class="row-state row-warehousing state-active">盘点中</span>
<span v-if="(scope.row.status || '').toString().trim() === '2'" class="row-state row-binding state-active">已完成</span>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<pagination v-if="crud.data.length!==0" />
</div>
<!--详情对话框 -->
<el-dialog
class="inventory-detail-dialog"
:visible.sync="detailDialogVisible"
title="入库/出库详情"
width="1000px"
append-to-body
:close-on-click-modal="false"
:modal-append-to-body="false"
>
<div v-if="selectedTask" class="task-detail">
<!-- 任务基本信息 -->
<el-table class="archives-table" stripe style="width: 100%;" :data="selectedTask">
<el-table-column prop="type" label="类型" />
<el-table-column prop="billNo" label="任务单号" min-width="180px" :show-overflow-tooltip="true" />
<el-table-column prop="warehouseName" label="所属市州" />
<el-table-column prop="stockNum" label="关联单号" />
<el-table-column prop="stockNum" label="申请人" />
<el-table-column prop="stockNum" label="申请部门" />
<el-table-column prop="takeDate" label="创建时间" width="150px">
<template slot-scope="scope">
<div>{{ scope.row.takeDate | parseTime }}</div>
</template>
</el-table-column>
<el-table-column prop="takeStart" label="入库开始时间" width="150px">
<template slot-scope="scope">
<div>{{ scope.row.takeStart | parseTime }}</div>
</template>
</el-table-column>
<el-table-column prop="takeEnd" label="入库结束时间" width="150px">
<template slot-scope="scope">
<div>{{ scope.row.takeEnd | parseTime }}</div>
</template>
</el-table-column>
<el-table-column prop="stockNum" label="总金额" />
<el-table-column prop="stockNum" label="总数量" />
<el-table-column prop="stockNum" label="异常数量" />
<el-table-column prop="status" label="状态" align="center" min-width="100px">
<template slot-scope="scope">
<span v-if="(scope.row.status || '').toString().trim() === '0'" class="row-state row-lending ">未盘点</span>
<span v-if="(scope.row.status || '').toString().trim() === '-1'" class="row-state row-lending state-active">已终止</span>
<span v-if="(scope.row.status || '').toString().trim() === '1'" class="row-state row-warehousing state-active">盘点中</span>
<span v-if="(scope.row.status || '').toString().trim() === '2'" class="row-state row-binding state-active">已完成</span>
</template>
</el-table-column>
</el-table>
<!-- 盘点清单 -->
<div class="inventory-list">
<h3>明细列表</h3>
<el-table v-loading="inventoryLoading" stripe style="width: 100%;" height="calc(100vh - 460px)" :data="inventoryList">
<el-table-column label="序号" align="center" width="55">
<template slot-scope="scope">
{{ (inventoryPage - 1) * inventoryPageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="taskResult" label="结果">
<template slot-scope="scope">
<el-tag v-if="scope.row.taskResult === 0">未盘</el-tag>
<el-tag v-if="scope.row.taskResult === 1" type="success">正常</el-tag>
<el-tag v-if="scope.row.taskResult === 2" type="error">盘亏</el-tag>
</template>
</el-table-column>
<el-table-column prop="assetMark" label="资产编码" min-width="220px" :show-overflow-tooltip="true" />
<el-table-column prop="assetName" label="资产名称" min-width="180px" :show-overflow-tooltip="true" />
<el-table-column prop="taskRemark" label="盘点备注" min-width="100px" />
<el-table-column prop="capitalStatus" label="资产状态" min-width="100px" />
<el-table-column prop="capitaltypename" label="资产类型" min-width="100px" />
<el-table-column prop="departmentname" label="使用部门" min-width="260px" :show-overflow-tooltip="true" />
<el-table-column prop="resourcename" label="使用人" min-width="100px" />
<el-table-column prop="glrname" label="管理人" min-width="100px" />
<el-table-column prop="cfd" label="存放地" min-width="260px" :show-overflow-tooltip="true" />
</el-table>
<div style="margin-top: 10px; display: flex; justify-content: flex-end;">
<el-pagination
:current-page="inventoryPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="inventoryPageSize"
layout="total, sizes, prev, pager, next"
:total="inventoryTotal"
style="margin: 20px 0 !important;"
@size-change="handleInventorySizeChange"
@current-change="handleInventoryCurrentChange"
/>
</div>
</div>
</div>
<div v-else>
暂无数据
</div>
</el-dialog>
</div>
</template>
<script>
import crudAsset, { FetchInitAssetInfo, FetchStockTakeDetailsByTaskId } from '@/api/asset/index'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import { exportFile } from '@/utils/index'
import qs from 'qs'
import { mapGetters } from 'vuex'
const defaultForm = { }
export default {
name: 'InOutLog',
components: { pagination, crudOperation },
cruds() {
return CRUD({ title: '出入库日志', url: 'api/stocktake/initStockTakeBill', crudMethod: { ...crudAsset }, optShow: {
add: false,
edit: false,
del: false,
reset: true,
download: false,
group: false
}})
},
mixins: [presenter(), header(), form(defaultForm), crud()],
data() {
return {
permission: { add: [], edit: [], del: [] },
keyWord: '',
optionVal: '',
options: [
{ value: '', label: '全部' },
{ value: 'billNo', label: '入库' },
{ value: 'departmentname', label: '出库' }
],
fetchLoading: false,
showFilterList: false,
listTable: [],
totalAssets: 0,
currentPage: 1,
pageSize: 10,
detailDialogVisible: false,
selectedTask: [],
inventoryList: [],
inventoryLoading: false,
inventoryPage: 1,
inventoryPageSize: 10,
inventoryTotal: 0,
statusOptions: [
{ value: 0, label: '未完成' },
{ value: 1, label: '执行中' },
{ value: 2, label: '已完成' }
],
query: {
status: ''
}
}
},
computed: {
...mapGetters([
'baseApi'
]),
hasAssets() {
return this.totalAssets > 0
}
},
created() {
},
mounted() {
},
methods: {
[CRUD.HOOK.beforeRefresh]() {
//
this.crud.query[this.optionVal] = this.keyWord
// this.crud.params.billNo = this.query.billNo
// this.crud.params.warehouseId = this.query.warehouseId
this.crud.params.status = this.query.status
//
this.originalPage = this.crud.page.page
this.originalSize = this.crud.page.size
// pageNopageSize
this.crud.params.pageNo = this.crud.page.page
this.crud.params.pageSize = this.crud.page.size
// pagesize
this.crud.params.page = undefined
this.crud.params.size = undefined
},
[CRUD.HOOK.afterRefresh]() {
//
if (this.originalPage !== undefined) {
this.crud.page.page = this.originalPage
this.crud.page.size = this.originalSize
// pageNopageSize
delete this.crud.params.pageNo
delete this.crud.params.pageSize
delete this.crud.params.page
delete this.crud.params.size
}
},
//
[CRUD.HOOK.beforeToAdd](crud, form) {
},
//
[CRUD.HOOK.beforeToEdit](crud, form) {
},
//
[CRUD.HOOK.afterValidateCU](crud) {
console.log(crud.form)
return true
},
//
[CRUD.HOOK.beforeAddCancel](crud) {
},
searchChange(val) {
if (val) {
this.keyWord = ''
this.options.forEach(option => {
if (option.value !== val) {
this.crud.query[option.value] = null
}
})
}
},
resetQuery() {
this.keyWord = ''
this.crud.query[this.optionVal] = this.keyWord
this.query.status = ''
this.crud.toQuery()
},
//
clickRowHandler(row) {
this.$refs.table.clearSelection()
this.$refs.table.toggleRowSelection(row)
},
doExport(data) {
crud.downloadLoading = true
this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续?</span>', '提示', {
confirmButtonText: '继续',
cancelButtonText: '取消',
type: 'warning',
dangerouslyUseHTMLString: true
}).then(() => {
const ids = []
data.forEach(val => {
ids.push(val.fondsId)
})
const params = {
'fondsIds': ids
}
exportFile(this.baseApi + '/api/fonds/download?' + qs.stringify(params, { indices: false }))
}).catch(() => {
})
},
//
fetchAssetsData(isBtn) {
this.$refs.form.validate((valid) => {
if (valid) {
if (isBtn) {
this.fetchLoading = true
}
this.showFilterList = true
const params = {
'departmentname': this.crud.form.departmentname,
'pageNo': this.currentPage,
'pageSize': this.pageSize
}
FetchInitAssetInfo(params).then(res => {
console.log('res', res)
this.listTable = res.records
this.totalAssets = res.total
this.fetchLoading = false
}).catch(err => {
console.log(err)
this.$message({ message: '获取数据失败', type: 'error', offset: 8 })
this.fetchLoading = false
})
} else {
return false
}
})
},
//
handleRowDblClick(row) {
this.selectedTask = []
this.selectedTask.push(row)
this.detailDialogVisible = true
this.inventoryPage = 1
this.inventoryPageSize = 10
//
this.fetchInventoryList()
},
//
fetchInventoryList() {
if (!this.selectedTask) return
this.inventoryLoading = true
const params = {
'taskId': this.selectedTask[0].id,
'pageNo': this.inventoryPage,
'pageSize': this.inventoryPageSize
}
FetchStockTakeDetailsByTaskId(params).then(res => {
console.log('FetchStockTakeDetailsByTaskId', res)
this.inventoryList = res.records
this.inventoryTotal = res.total
this.inventoryLoading = false
}).catch(err => {
console.log(err)
this.$message({ message: '获取数据失败', type: 'error', offset: 8 })
this.inventoryLoading = false
})
},
//
handleInventorySizeChange(size) {
this.inventoryPage = 1
this.inventoryPageSize = size
this.fetchInventoryList()
},
//
handleInventoryCurrentChange(current) {
this.inventoryPage = current
this.fetchInventoryList()
}
}
}
</script>
<style lang="scss" scoped>
.group-form{
.el-form-item{
&:nth-child(odd){
margin-right: 0;
}
&.form-item-style{
margin-right: 40px;
}
::v-deep .el-form-item__content{
width: 300px !important;
}
}
}
::v-deep .input-prepend .el-input__inner{
padding-left: 100px;
}
::v-deep .el-tag{
&.el-tag--small{
color: #0348f3 !important;
background-color: #eef5fe !important;
border-color: #c1dbfc !important;
}
&.el-tag--success {
background-color: #e7faf0 !important;
border-color: #d0f5e0!important;
color: #13ce66!important;
}
&.el-tag--info {
background-color: #f4f4f5 !important;
border-color: #f4f4f5!important;
color: #909399!important;
}
&.el-tag--error {
background-color: #fbc0b5 !important;
border-color: #fcab9d !important;
color: #ed4a41!important;
}
}
.task-detail {
padding: 10px 0;
}
.task-info {
margin-bottom: 20px;
}
.task-info h3,
.inventory-list h3 {
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
color: #333;
}
.inventory-list {
margin-top: 30px;
}
.inventory-list .el-table {
margin-top: 10px;
}
.inventory-detail-dialog{
::v-deep .el-dialog__body{
padding: 0 !important;
}
}
.el-table .el-button{
padding: 7px 10px !important;
}
</style>

219
src/views/assetManage/inventory/index.vue

@ -125,22 +125,17 @@
<img :src="selectedAsset && selectedAsset.imageUrl || require('@/assets/images/system/default-img2.png')" alt="资产图片"> <img :src="selectedAsset && selectedAsset.imageUrl || require('@/assets/images/system/default-img2.png')" alt="资产图片">
</div> --> </div> -->
<!-- 资产图片轮播 -->
<div class="asset-image">
<!-- 有图片时显示轮播 -->
<el-carousel
v-if="assetImageList.length > 0"
:interval="5000"
arrow="always"
height="200px"
class="asset-carousel"
>
<el-carousel-item v-for="(img, index) in assetImageList" :key="index">
<img :src="img" alt="资产图片" class="carousel-img">
</el-carousel-item>
</el-carousel>
<!-- 资产图片列表竖向滚动 + 删除按钮 -->
<div class="asset-image-wrapper">
<div v-if="assetImageList.length > 0" class="asset-image-scroll">
<div v-for="(item, index) in assetImageList" :key="item.id || index" class="image-item">
<img :src="item.imgUrl" alt="资产图片" class="preview-img">
<div class="delete-btn" @click="deleteAssetImage(item.id, index)">
<i class="el-icon-close" />
</div>
</div>
</div>
<!-- 无图片时显示默认图 -->
<div v-else class="default-img"> <div v-else class="default-img">
<img :src="require('@/assets/images/system/default-img2.png')" alt="默认图片"> <img :src="require('@/assets/images/system/default-img2.png')" alt="默认图片">
</div> </div>
@ -149,12 +144,11 @@
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import crudAsset, { FetchAssetInfoDetailsByMark } from '@/api/asset/index'
import crudAsset, { FetchAssetInfoDetailsByMark, FetchDeleteAssetInfoPhotoById } from '@/api/asset/index'
import CRUD, { presenter, header, crud } from '@crud/crud' import CRUD, { presenter, header, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation' import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation' import crudOperation from '@crud/CRUD.operation'
@ -330,24 +324,62 @@ export default {
this.selectedAsset = {} this.selectedAsset = {}
this.assetImageList = [] this.assetImageList = []
const params = { mark: row.mark } const params = { mark: row.mark }
// FetchAssetInfoDetailsByMark(params).then(res => {
// console.log('', res)
// this.selectedAsset = res || row
// const photoList = res.assetInfoPhoto || []
// //
// this.assetImageList = photoList.map(item => {
// return this.baseApi + '/api/minio/getImg?bucket=2&fileName=' + item.photoUrl
// })
// console.log(' this.assetImageList', this.assetImageList)
// }).catch(() => {
// this.$message({ message: '', type: 'error', offset: 8 })
// })
FetchAssetInfoDetailsByMark(params).then(res => { FetchAssetInfoDetailsByMark(params).then(res => {
console.log('获取资产详情成功', res)
this.selectedAsset = res || row this.selectedAsset = res || row
const photoList = res.assetInfoPhoto || [] const photoList = res.assetInfoPhoto || []
//
this.assetImageList = photoList.map(item => {
return this.baseApi + '/api/minio/getImg?bucket=2&fileName=' + item.photoUrl
})
// this.assetImageList = [
this.assetImageList = photoList.map(item => ({
id: item.id,
photoUrl: item.photoUrl,
imgUrl: this.baseApi + '/api/minio/getImg?bucket=2&fileName=' + item.photoUrl
}))
// this.assetImageList = [
// 'https://qiniu.aiyxlib.com/1604467087428', // 'https://qiniu.aiyxlib.com/1604467087428',
// 'https://qiniu.aiyxlib.com/1605059837392', // 'https://qiniu.aiyxlib.com/1605059837392',
// 'https://qiniu.aiyxlib.com/1605060069983', // 'https://qiniu.aiyxlib.com/1605060069983',
// ]
// 'https://qiniu.aiyxlib.com/1605060069983',
// 'https://qiniu.aiyxlib.com/1605060269830',
// 'https://qiniu.aiyxlib.com/1606124577077',
// 'https://qiniu.aiyxlib.com/1605060069983'
// ]
console.log(' this.assetImageList', this.assetImageList) console.log(' this.assetImageList', this.assetImageList)
}).catch(() => {
this.$message({ message: '获取资产详情失败', type: 'error', offset: 8 })
}) })
}, },
//
deleteAssetImage(photoId, index) {
this.$confirm('确定要删除这张图片吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
console.log('photoId', [photoId])
FetchDeleteAssetInfoPhotoById([photoId]).then(res => {
console.log('res', res)
if (res.data !== null) {
this.assetImageList.splice(index, 1)
this.$message({ message: '删除成功', type: 'success', offset: 8 })
} else {
this.$message({ message: res.message, type: 'error', offset: 8 })
}
}).catch(() => {
this.$message({ message: '删除失败', type: 'error', offset: 8 })
})
}).catch(() => {})
},
changeDetailTab(index) { changeDetailTab(index) {
this.tabIndex = index this.tabIndex = index
}, },
@ -416,52 +448,129 @@ export default {
flex: 1; flex: 1;
} }
.asset-carousel {
// .asset-carousel {
// width: 400px;
// height: 200px;
// ::v-deep .el-carousel__item {
// display: flex;
// align-items: center;
// justify-content: center;
// background: #f5f7fa;
// }
// }
// .carousel-img {
// max-width: 100%;
// max-height: 200px;
// object-fit: contain;
// }
// .asset-image {
// display: flex;
// align-items: center;
// justify-content: center;
// width: 400px;
// height: 200px;
// }
// // .asset-img {
// // // width: 100%;
// // // height: 200px;
// // object-fit: cover;
// // border-radius: 4px;
// // img {
// // display: block;
// // width: 400px;
// // }
// // }
// .default-img{
// width: 200px;
// height: 200px;
// display: flex;
// align-items: center;
// justify-content: center;
// background-color: #f5f7fa;
// border: 4px solid #dcdfe6;
// border-radius: 4px;
// img {
// width: 100%;
// height: 100%;
// object-fit: cover;
// }
// }
//
.asset-image-wrapper {
width: 400px; width: 400px;
height: 200px;
::v-deep .el-carousel__item {
display: flex;
align-items: center;
justify-content: center;
background: #f5f7fa;
}
height: 660px; /* 固定高度 */
overflow: hidden;
}
.asset-image-scroll {
width: 100%;
height: 100%;
overflow-y: auto; /* 竖向滚动条 */
padding-right: 5px;
display: flex;
flex-direction: column;
gap: 10px;
} }
.carousel-img {
max-width: 100%;
max-height: 200px;
.image-item {
position: relative;
width: 100%;
height: 150px;
background: #f5f7fa;
border-radius: 4px;
overflow: hidden;
flex-shrink: 0;
}
.preview-img {
width: 100%;
height: 100%;
object-fit: contain; object-fit: contain;
background: #fff;
} }
.asset-image {
//
.delete-btn {
position: absolute;
top: 5px;
right: 5px;
width: 22px;
height: 22px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 400px;
height: 200px;
cursor: pointer;
z-index: 10;
transition: 0.2s;
&:hover {
background: #f56c6c;
}
i {
font-size: 14px;
}
} }
// .asset-img {
// // width: 100%;
// // height: 200px;
// object-fit: cover;
// border-radius: 4px;
// img {
// display: block;
// width: 400px;
// }
// }
.default-img{
width: 200px;
//
.default-img {
width: 100%;
height: 200px; height: 200px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #f5f7fa; background-color: #f5f7fa;
border: 4px solid #dcdfe6;
border: 2px solid #dcdfe6;
border-radius: 4px; border-radius: 4px;
img { img {
width: 100%;
height: 100%;
width: 180px;
height: 180px;
object-fit: cover; object-fit: cover;
} }
} }

27
src/views/dashboard/PanelGroup.vue

@ -6,7 +6,7 @@
<img src="@/assets/images/home-icon1.png" alt=""> <img src="@/assets/images/home-icon1.png" alt="">
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
盘点区域
资产数量
<div class="card-panel-text"> <div class="card-panel-text">
<count-to :start-val="0" :end-val="topObjectNum && topObjectNum.regionCount" :duration="3200" class="card-panel-num" /> <count-to :start-val="0" :end-val="topObjectNum && topObjectNum.regionCount" :duration="3200" class="card-panel-num" />
</div> </div>
@ -19,7 +19,7 @@
<img src="@/assets/images/home-icon2.png" alt=""> <img src="@/assets/images/home-icon2.png" alt="">
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
盘点书架
市州
<div class="card-panel-text"> <div class="card-panel-text">
<count-to :start-val="0" :end-val="topObjectNum && topObjectNum.shelfCount" :duration="3200" class="card-panel-num" /> <count-to :start-val="0" :end-val="topObjectNum && topObjectNum.shelfCount" :duration="3200" class="card-panel-num" />
</div> </div>
@ -32,20 +32,10 @@
<img src="@/assets/images/home-icon3.png" alt=""> <img src="@/assets/images/home-icon3.png" alt="">
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
盘点层位
<!-- <div style="display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;"> -->
仓库
<div class="card-panel-text"> <div class="card-panel-text">
<count-to :start-val="0" :end-val="topObjectNum && topObjectNum.gridCount" :duration="3200" class="card-panel-num" /> <count-to :start-val="0" :end-val="topObjectNum && topObjectNum.gridCount" :duration="3200" class="card-panel-num" />
</div> </div>
<!-- <span style="font-size: 24px; margin: 10px 10px 0 10px;">/</span> -->
<!-- <span class="error-data">{{ topObjectNum.noStockGridCount }}</span> -->
<!-- </div> -->
</div>
<div class="card-panel-description">
盘点关闭
<div class="card-panel-text">
<count-to :start-val="0" :end-val="topObjectNum && topObjectNum.noStockGridCount" :duration="3200" class="card-panel-num" style="color: #ED4A41;" />
</div>
</div> </div>
</div> </div>
</el-col> </el-col>
@ -55,20 +45,11 @@
<img src="@/assets/images/home-icon4.png" alt=""> <img src="@/assets/images/home-icon4.png" alt="">
</div> </div>
<div class="card-panel-description"> <div class="card-panel-description">
盘点设备
设备
<div class="card-panel-text"> <div class="card-panel-text">
<count-to :start-val="0" :end-val="topObjectNum && topObjectNum.deviceCount" :duration="3200" class="card-panel-num" /> <count-to :start-val="0" :end-val="topObjectNum && topObjectNum.deviceCount" :duration="3200" class="card-panel-num" />
</div> </div>
</div> </div>
<div class="card-panel-description">
离线设备
<div class="card-panel-text">
<div v-if="loading" style="height: 40px; line-height: 38px;"><i class="el-icon-loading" style="font-size: 16px;" /></div>
<count-to v-else :start-val="0" :end-val="deviceErrorCount" :duration="3200" class="card-panel-num" style="color: #ED4A41;" />
<!-- <count-to :start-val="0" :end-val="deviceErrorCount" :duration="3200" class="card-panel-num" style="color: #ED4A41;" /> -->
</div>
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>

131
src/views/home.vue

@ -9,27 +9,19 @@
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<h3 class="home-item-title"> <h3 class="home-item-title">
盘点日志 盘点日志
<router-link :to="{ path: '/check/check/checkLog'}">
<router-link :to="{ path: '/stocktaking'}">
<div style="position: absolute; right: 20px; top: 20px; color: #999;" class="el-icon-more" /> <div style="position: absolute; right: 20px; top: 20px; color: #999;" class="el-icon-more" />
</router-link> </router-link>
</h3> </h3>
<div class="home-flowable" style="height: calc(100% - 54px); overflow-x: hidden;"> <div class="home-flowable" style="height: calc(100% - 54px); overflow-x: hidden;">
<div class="home-tab"> <div class="home-tab">
<span :class="{'home-tab-active': flowableTabIndex == 0}">未完成({{ stockLogIncompleteData.length !==0? stockLogIncompleteData.length: 0 }})</span> <span :class="{'home-tab-active': flowableTabIndex == 0}">未完成({{ stockLogIncompleteData.length !==0? stockLogIncompleteData.length: 0 }})</span>
<span :class="{'home-tab-active': flowableTabIndex == 1}">已结束({{ stockLogCompletedData.length !==0? stockLogCompletedData.length: 0 }})</span>
<!-- <span :class="{'home-tab-active': flowableTabIndex == 2}">已完成({{ flowableData.length !==0? flowableData.length: 0 }})</span>
<span :class="{'home-tab-active': flowableTabIndex == 3}" @click="toMoreProcess">更多任务</span> -->
<span :class="{'home-tab-active': flowableTabIndex == 1}">已完成({{ stockLogCompletedData.length !==0? stockLogCompletedData.length: 0 }})</span>
</div> </div>
<div class="home-flowable-list" style="height: calc(100% - 45px); overflow-y: auto; overflow-x: hidden;"> <div class="home-flowable-list" style="height: calc(100% - 45px); overflow-y: auto; overflow-x: hidden;">
<el-table v-if="stockLogIncompleteData.length !== 0" height="calc(100%)" :data="stockLogIncompleteData" class="archives-table" stripe style="width: 100%"> <el-table v-if="stockLogIncompleteData.length !== 0" height="calc(100%)" :data="stockLogIncompleteData" class="archives-table" stripe style="width: 100%">
<el-table-column prop="stockBill" label="盘点单号" /> <el-table-column prop="stockBill" label="盘点单号" />
<el-table-column prop="stockRegion" label="目标位置" min-width="180" />
<el-table-column prop="stockGridNum" label="目标数量" align="right">
<template slot-scope="scope">
<div>{{ scope.row.stockGridNum + ' / '+ (scope.row.totalGridNum?scope.row.totalGridNum:'0') +' 层位' }}</div>
</template>
</el-table-column>
<el-table-column prop="state" label="盘点状态" align="center">
<el-table-column prop="state" label="状态" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.state === 0" class="row-state row-lending state-active">已终止</span> <span v-if="scope.row.state === 0" class="row-state row-lending state-active">已终止</span>
<span v-if="scope.row.state === 1" class="row-state row-warehousing state-active">排队中</span> <span v-if="scope.row.state === 1" class="row-state row-warehousing state-active">排队中</span>
@ -37,11 +29,11 @@
<span v-if="scope.row.state === 3" class="row-state row-physical state-active">已完成</span> <span v-if="scope.row.state === 3" class="row-state row-physical state-active">已完成</span>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column prop="createTime" label="申请时间" width="180"> -->
<!-- <template slot-scope="scope"> -->
<!-- <div>{{ scope.row.createTime | parseTime }}</div> -->
<!-- </template> -->
<!-- </el-table-column> -->
<el-table-column prop="createTime" label="时间" width="180">
<template slot-scope="scope">
<div>{{ scope.row.createTime | parseTime }}</div>
</template>
</el-table-column>
</el-table> </el-table>
<div v-else class="empty-main" style="height: 100%;"> <div v-else class="empty-main" style="height: 100%;">
<svg-icon icon-class="empty" class-name="empty-img" /> <svg-icon icon-class="empty" class-name="empty-img" />
@ -91,52 +83,53 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20" style="height:calc(50vh - 174px);"> <el-row :gutter="20" style="height:calc(50vh - 174px);">
<el-col :xs="24" :sm="24" :lg="8">
<!-- 档案借阅 -->
<div class="container-wrap">
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class="home-item-title">
盘点概况
</h3>
<div v-if="taskStockLogData.length !== 0" class="chart-wrapper">
<taskStockLogEcharts :task-stock-log-data="taskStockLogData" />
</div>
<div v-else class="empty-main">
<svg-icon icon-class="empty" class-name="empty-img" />
<p>暂无数据</p>
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<!-- 档案门类 -->
<el-col :xs="24" :sm="24" :lg="12">
<div class="container-wrap"> <div class="container-wrap">
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<h3 class="home-item-title"> <h3 class="home-item-title">
盘点统计
出入库日志
<router-link :to="{ path: '/inOutLog'}">
<div style="position: absolute; right: 20px; top: 20px; color: #999;" class="el-icon-more" />
</router-link>
</h3> </h3>
<div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;">
<checkSwiper ref="checkSwiperRefs" />
<div class="home-flowable" style="height: calc(100% - 54px); overflow-x: hidden;">
<div class="home-tab">
<span :class="{'home-tab-active': flowableTabIndex == 0}">未完成({{ stockLogIncompleteData.length !==0? stockLogIncompleteData.length: 0 }})</span>
<span :class="{'home-tab-active': flowableTabIndex == 1}">已完成({{ stockLogCompletedData.length !==0? stockLogCompletedData.length: 0 }})</span>
</div>
<div class="home-flowable-list" style="height: calc(100% - 45px); overflow-y: auto; overflow-x: hidden;">
<el-table v-if="stockLogIncompleteData.length !== 0" height="calc(100%)" :data="stockLogIncompleteData" class="archives-table" stripe style="width: 100%">
<el-table-column prop="stockBill" label="盘点单号" />
<el-table-column prop="state" label="状态" align="center">
<template slot-scope="scope">
<span v-if="scope.row.state === 0" class="row-state row-lending state-active">已终止</span>
<span v-if="scope.row.state === 1" class="row-state row-warehousing state-active">排队中</span>
<span v-if="scope.row.state === 2" class="row-state row-binding state-active">盘点中</span>
<span v-if="scope.row.state === 3" class="row-state row-physical state-active">已完成</span>
</template>
</el-table-column>
<el-table-column prop="createTime" label="时间" width="180">
<template slot-scope="scope">
<div>{{ scope.row.createTime | parseTime }}</div>
</template>
</el-table-column>
</el-table>
<div v-else class="empty-main" style="height: 100%;">
<svg-icon icon-class="empty" class-name="empty-img" />
<p>暂无数据</p>
</div>
</div>
</div> </div>
<!-- <div v-else class="empty-main">
<svg-icon icon-class="empty" class-name="empty-img" />
<p>暂无数据</p>
</div> -->
</div> </div>
</el-col> </el-col>
<el-col :xs="24" :sm="24" :lg="8">
<!-- 档案类型 -->
<el-col :xs="24" :sm="24" :lg="12">
<div class="container-wrap"> <div class="container-wrap">
<span class="right-top-line" /> <span class="right-top-line" />
<span class="left-bottom-line" /> <span class="left-bottom-line" />
<h3 class="home-item-title"> <h3 class="home-item-title">
流通统计
报警设备
</h3> </h3>
<!-- <div class="refresh-date">2024-11-28 09:46</div> -->
<div class="chart-wrapper" style="padding: 0 10px; margin-top: -10px;">
<bookSwiper ref="bookSwiperRefs" />
</div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -146,12 +139,9 @@
<script> <script>
import PanelGroup from './dashboard/PanelGroup' import PanelGroup from './dashboard/PanelGroup'
import taskStockLogEcharts from '@/views/components/echarts/taskStockLog.vue'
// import lendAcross from '@/views/components/echarts/lendAcross.vue' // import lendAcross from '@/views/components/echarts/lendAcross.vue'
// import catePie from '@/views/components/echarts/catePie.vue' // import catePie from '@/views/components/echarts/catePie.vue'
// import typePie from '@/views/components/echarts/typePie.vue' // import typePie from '@/views/components/echarts/typePie.vue'
import bookSwiper from '@/views/components/bookSwiper.vue'
import checkSwiper from '@/views/components/checkSwiper.vue'
import serverProgress from '@/views/components/echarts/serverProgress.vue' import serverProgress from '@/views/components/echarts/serverProgress.vue'
import serverGpu from '@/views/components/echarts/serverGpu.vue' import serverGpu from '@/views/components/echarts/serverGpu.vue'
import serverGpuUse from '@/views/components/echarts/serverGpuUse.vue' import serverGpuUse from '@/views/components/echarts/serverGpuUse.vue'
@ -169,10 +159,7 @@ export default {
components: { components: {
PanelGroup, PanelGroup,
// lendAcross, // lendAcross,
taskStockLogEcharts,
// catePie, // catePie,
bookSwiper,
checkSwiper,
// typePie, // typePie,
serverProgress, serverProgress,
serverGpu, serverGpu,
@ -193,6 +180,7 @@ export default {
deviceErrorCount: 0 deviceErrorCount: 0
}, },
taskStockLogData: [], taskStockLogData: [],
inOutLogData: [],
echartsTimer: null, echartsTimer: null,
refreshtime: 10000, refreshtime: 10000,
systemTimer: null, systemTimer: null,
@ -207,19 +195,6 @@ export default {
archivesTotalNum: 0, archivesTotalNum: 0,
flowableData: [], flowableData: [],
flowableTabIndex: 0, flowableTabIndex: 0,
lendData: {
archivesTotalNum: null,
otherData: []
},
cateData: [],
typeData: [],
addArcivesData: {
addArcivesMaxCount: null,
addArcivesMonth: [],
addArcivesNum: [],
addArcivesNumFile: []
},
swiperActiveIndex: 0,
swiperOptionServer: { swiperOptionServer: {
autoplay: { autoplay: {
delay: 8000, delay: 8000,
@ -252,14 +227,6 @@ export default {
this.getStockLog() this.getStockLog()
this.handleInitStockInfo() this.handleInitStockInfo()
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.bookSwiperRefs.swiperParams = {}
this.$refs.bookSwiperRefs.swiperShelfParams = {}
if (this.$refs.bookSwiperRefs.swiperActiveIndex === 0) {
this.$refs.bookSwiperRefs.getInitHotBookList()
} else {
this.$refs.bookSwiperRefs.getInitHotShelfList()
}
this.$refs.serveTerminalRefs.initData() this.$refs.serveTerminalRefs.initData()
}) })
}, },
@ -267,18 +234,6 @@ export default {
// const _this = this // const _this = this
// // // //
// this.echartsTimer = setInterval(() => { // this.echartsTimer = setInterval(() => {
// _this.lendData = {
// archivesTotalNum: null,
// otherData: []
// }
// _this.cateData = []
// _this.typeData = []
// _this.addArcivesData = {
// addArcivesMaxCount: null,
// addArcivesMonth: [],
// addArcivesNum: [],
// addArcivesNumFile: []
// }
// _this.handleMainData() // _this.handleMainData()
// }, this.refreshtime) // }, this.refreshtime)

Loading…
Cancel
Save