更新
This commit is contained in:
49
src/api/areavisual/lane.js
Normal file
49
src/api/areavisual/lane.js
Normal file
@@ -0,0 +1,49 @@
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2025-11-17 09:25:12
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-14 13:53:22
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
|
||||
// 获得巷道分页
|
||||
export function getLanePage(query) {
|
||||
return request({
|
||||
url: '/wms/lane/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 获得巷道
|
||||
export function getLane(id) {
|
||||
return request({
|
||||
url: '/wms/lane/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 删除巷道
|
||||
export function deleteLane(id) {
|
||||
return request({
|
||||
url: '/wms/lane/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
// 更新
|
||||
export function updateLane(data) {
|
||||
return request({
|
||||
url: '/wms/lane/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 创建
|
||||
export function createLane(data) {
|
||||
return request({
|
||||
url: '/wms/lane/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
66
src/api/areavisual/lineEdgeLibrary.js
Normal file
66
src/api/areavisual/lineEdgeLibrary.js
Normal file
@@ -0,0 +1,66 @@
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2025-11-17 09:25:12
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-14 14:26:15
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
|
||||
// 获得线边库分页
|
||||
export function getLineEdgeLibraryPage(query) {
|
||||
return request({
|
||||
url: '/wms/line-edge-library/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 获得线边库
|
||||
export function getLineEdgeLibrary(id) {
|
||||
return request({
|
||||
url: '/wms/line-edge-library/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 删除线边库
|
||||
export function deleteLineEdgeLibrary(id) {
|
||||
return request({
|
||||
url: '/wms/line-edge-library/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
// 更新
|
||||
export function updateLineEdgeLibrary(data) {
|
||||
return request({
|
||||
url: '/wms/line-edge-library/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 更新线边库实时pc --清空操作
|
||||
export function QKLineEdgeLibrary(data) {
|
||||
return request({
|
||||
url: '/wms/line-edge-library/update/pc',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 创建
|
||||
export function createLineEdgeLibrary(data) {
|
||||
return request({
|
||||
url: '/wms/line-edge-library/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获得设备分页
|
||||
export function getEquipmentPage(query) {
|
||||
return request({
|
||||
url: '/wms/equipment/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
@@ -1,72 +1,79 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取区域列表
|
||||
export function getAreaList(params) {
|
||||
return request({
|
||||
url: '/wms/region/page',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取区域空满数量
|
||||
export function postAllAreaInfo(data) {
|
||||
return request({
|
||||
url: '/wms/region/lsit/count',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取指定库区库位信息
|
||||
export function postAreaInfo(data) {
|
||||
return request({
|
||||
url: '/wms/line-edge-library/list/region',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取区域总览
|
||||
export function postAllAreaOverview(data) {
|
||||
return request({
|
||||
url: '/wms/line-edge-library/line/count',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除能源实时数据库plc相关
|
||||
export function deleteEnergyPlc(id) {
|
||||
return request({
|
||||
url: '/base/energy-plc/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取关联表编码
|
||||
export function getCode() {
|
||||
return request({
|
||||
url: '/base/energy-plc/getCode',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得能源实时数据库plc相关分页
|
||||
export function getEnergyPlcPage(data) {
|
||||
return request({
|
||||
url: '/base/energy-plc/page',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 导出能源实时数据库plc相关 Excel
|
||||
export function exportEnergyPlcExcel(query) {
|
||||
return request({
|
||||
url: '/base/energy-plc/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2026-01-06 15:18:38
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-15 15:02:04
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 获取区域列表
|
||||
export function getAreaList(params) {
|
||||
return request({
|
||||
url: '/wms/region/page',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取区域空满数量
|
||||
export function postAllAreaInfo(data) {
|
||||
return request({
|
||||
url: '/wms/region/lsit/count',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取指定库区库位信息
|
||||
export function postAreaInfo(params) {
|
||||
return request({
|
||||
url: '/wms/line-edge-library/list/region',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取区域总览
|
||||
export function postAllAreaOverview(data) {
|
||||
return request({
|
||||
url: '/wms/line-edge-library/line/count',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除能源实时数据库plc相关
|
||||
export function deleteEnergyPlc(id) {
|
||||
return request({
|
||||
url: '/base/energy-plc/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取关联表编码
|
||||
export function getCode() {
|
||||
return request({
|
||||
url: '/base/energy-plc/getCode',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 获得能源实时数据库plc相关分页
|
||||
export function getEnergyPlcPage(data) {
|
||||
return request({
|
||||
url: '/base/energy-plc/page',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 导出能源实时数据库plc相关 Excel
|
||||
export function exportEnergyPlcExcel(query) {
|
||||
return request({
|
||||
url: '/base/energy-plc/export-excel',
|
||||
method: 'get',
|
||||
params: query,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
49
src/api/areavisual/region.js
Normal file
49
src/api/areavisual/region.js
Normal file
@@ -0,0 +1,49 @@
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2025-11-17 09:25:12
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-14 13:35:11
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
|
||||
|
||||
// 获得区域分页
|
||||
export function getRegionPage(query) {
|
||||
return request({
|
||||
url: '/wms/region/page',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 获得区域
|
||||
export function getRegion(id) {
|
||||
return request({
|
||||
url: '/wms/region/get?id=' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 删除区域
|
||||
export function deleteRegion(id) {
|
||||
return request({
|
||||
url: '/wms/region/delete?id=' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
// 更新
|
||||
export function updateRegion(data) {
|
||||
return request({
|
||||
url: '/wms/region/update',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 创建
|
||||
export function createRegion(data) {
|
||||
return request({
|
||||
url: '/wms/region/create',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2025-11-17 09:25:12
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2025-11-28 09:29:14
|
||||
* @LastEditTime: 2026-01-13 16:13:53
|
||||
* @Description:
|
||||
*/
|
||||
import request from '@/utils/request'
|
||||
@@ -16,6 +16,14 @@ export function getProductPage(query) {
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 获得所有原料
|
||||
export function getAllProductPage(query) {
|
||||
return request({
|
||||
url: '/wms/material/list/all/code',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
// 获得原料
|
||||
export function getProduct(id) {
|
||||
return request({
|
||||
|
||||
@@ -14,7 +14,12 @@
|
||||
v-if="collapse"
|
||||
key="collapse"
|
||||
class="sidebar-logo-link"
|
||||
to="/">
|
||||
:to="{
|
||||
path: '/',
|
||||
query: {
|
||||
keyword: 'home',
|
||||
},
|
||||
}">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<h1
|
||||
v-else
|
||||
@@ -28,7 +33,16 @@
|
||||
{{ title }}
|
||||
</h1>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<router-link
|
||||
v-else
|
||||
key="expand"
|
||||
class="sidebar-logo-link"
|
||||
:to="{
|
||||
path: '/',
|
||||
query: {
|
||||
keyword: 'home',
|
||||
},
|
||||
}">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<h1
|
||||
class="sidebar-title"
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2026-01-06 15:18:41
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-15 09:52:23
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<div v-if="!item.hidden">
|
||||
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
/*
|
||||
* @Author: zwq
|
||||
* @Date: 2026-01-06 15:18:38
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-15 09:54:44
|
||||
* @Description:
|
||||
*/
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import { Message } from 'element-ui'
|
||||
@@ -9,7 +16,7 @@ import { isRelogin } from '@/utils/request'
|
||||
NProgress.configure({ showSpinner: false })
|
||||
|
||||
// 增加三方登陆 update by 芋艿
|
||||
const whiteList = ['/login', '/social-login','screenbg', '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']
|
||||
const whiteList = ['/login', '/social-login', 'screenbg', '/auth-redirect', '/bind', '/register', '/oauthLogin/gitee']
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start()
|
||||
@@ -17,7 +24,12 @@ router.beforeEach((to, from, next) => {
|
||||
to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
|
||||
/* has token*/
|
||||
if (to.path === '/login') {
|
||||
next({ path: '/' })
|
||||
next({
|
||||
path: '/',
|
||||
query: {
|
||||
keyword: 'home',
|
||||
},
|
||||
})
|
||||
NProgress.done()
|
||||
} else {
|
||||
if (store.getters.roles.length === 0) {
|
||||
@@ -35,7 +47,12 @@ router.beforeEach((to, from, next) => {
|
||||
}).catch(err => {
|
||||
store.dispatch('LogOut').then(() => {
|
||||
Message.error(err)
|
||||
next({ path: '/' })
|
||||
next({
|
||||
path: '/',
|
||||
query: {
|
||||
keyword: 'home',
|
||||
},
|
||||
})
|
||||
})
|
||||
})
|
||||
} else {
|
||||
|
||||
@@ -77,12 +77,15 @@ export const constantRoutes = [
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: (resolve) => require(['@/views/home/index'], resolve),
|
||||
component: (resolve) => require(['@/views/productionVisualization/equipmentBoard'], resolve),
|
||||
name: '首页',
|
||||
meta: { title: '首页', icon: 'dashboard', affix: true },
|
||||
hidden: true,
|
||||
},
|
||||
],
|
||||
props: (route) => ({
|
||||
keyword: 'home',
|
||||
})
|
||||
},
|
||||
{
|
||||
path: '/screenbg',
|
||||
|
||||
81
src/views/areavisual/lane/add-or-updata.vue
Normal file
81
src/views/areavisual/lane/add-or-updata.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2025-11-28 14:38:31
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="80px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物料编码" prop="materialCode">
|
||||
<el-input
|
||||
v-model="dataForm.materialCode"
|
||||
clearable
|
||||
placeholder="请输入物料编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物料型号" prop="materialName">
|
||||
<el-input
|
||||
v-model="dataForm.materialName"
|
||||
clearable
|
||||
placeholder="请输入物料型号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物料规格" prop="material">
|
||||
<el-input
|
||||
v-model="dataForm.material"
|
||||
clearable
|
||||
placeholder="请输入物料规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicAdd from '@/mixins/basic-add';
|
||||
import { createProduct, updateProduct,getProduct } from '@/api/ssdl/product&recipe';
|
||||
|
||||
export default {
|
||||
mixins: [basicAdd],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
createURL: createProduct,
|
||||
updateURL: updateProduct,
|
||||
infoURL: getProduct,
|
||||
},
|
||||
dataForm: {
|
||||
id: undefined,
|
||||
material: undefined,
|
||||
materialName: undefined,
|
||||
materialCode: undefined,
|
||||
},
|
||||
typeArr: [],
|
||||
dataRule: {
|
||||
materialCode: [
|
||||
{ required: true, message: '物料编码不能为空', trigger: 'blur' },
|
||||
],
|
||||
materialName: [
|
||||
{ required: true, message: '物料型号不能为空', trigger: 'blur' },
|
||||
],
|
||||
material: [
|
||||
{ required: true, message: '规格不能为空', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
62
src/views/areavisual/lane/changeStatus.vue
Normal file
62
src/views/areavisual/lane/changeStatus.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2025-10-11 14:41:12
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-14 14:15:47
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-switch
|
||||
@change="changeStatus"
|
||||
size="small"
|
||||
v-model="injectData.laneState"
|
||||
:active-value="1"
|
||||
:inactive-value="2"></el-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateLane } from '@/api/areavisual/lane';
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
changeStatus(val) {
|
||||
const pdata = { ...this.injectData, laneState: val };
|
||||
this.$confirm(
|
||||
`是否确认修改${'巷道 [ ' + this.injectData.laneName + ' ] '}的状态?`,
|
||||
'更新状态',
|
||||
{
|
||||
confirmButtonText: '确认修改',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
updateLane(pdata).then((res) => {
|
||||
if (res.code === 0 || res.code === 200) {
|
||||
this.$modal.msgSuccess('修改成功');
|
||||
this.$emit('emitData');
|
||||
} else {
|
||||
this.$modal.msg(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$emit('emitData');
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消',
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
191
src/views/areavisual/lane/index.vue
Normal file
191
src/views/areavisual/lane/index.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="tableData"
|
||||
@emitFun="getDataList">
|
||||
</base-table>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<base-dialog
|
||||
:dialogTitle="addOrEditTitle"
|
||||
:dialogVisible="addOrUpdateVisible"
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
width="50%">
|
||||
<add-or-update
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="successSubmit"></add-or-update>
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddOrUpdate from './add-or-updata';
|
||||
import basicPage from '@/mixins/basic-page';
|
||||
import { parseTime } from '@/filter/code-filter';
|
||||
import { deleteLane, getLanePage } from '@/api/areavisual/lane';
|
||||
import changeStatus from './changeStatus.vue';
|
||||
|
||||
const lane = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'A巷道',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'B巷道',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'C巷道',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'D巷道',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'E巷道',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'F巷道',
|
||||
},
|
||||
];
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'laneCode',
|
||||
label: '巷道编码',
|
||||
},
|
||||
{
|
||||
prop: 'laneName',
|
||||
label: '巷道名称',
|
||||
},
|
||||
{
|
||||
prop: 'lane',
|
||||
label: '巷道',
|
||||
filter: (val) => {
|
||||
return lane.find((i) => i.id == val)
|
||||
? lane.find((i) => i.id == val).name
|
||||
: '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'laneSort',
|
||||
label: '巷道排序',
|
||||
width:90,
|
||||
},
|
||||
{
|
||||
prop: 'laneState',
|
||||
label: '巷道状态',
|
||||
width:90,
|
||||
subcomponent: changeStatus,
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
filter: parseTime,
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getLanePage,
|
||||
deleteURL: deleteLane,
|
||||
},
|
||||
tableProps,
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'edit',
|
||||
btnName: '编辑',
|
||||
},
|
||||
{
|
||||
type: 'delete',
|
||||
btnName: '删除',
|
||||
},
|
||||
].filter((v) => v),
|
||||
tableData: [],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '名称',
|
||||
placeholder: '名称',
|
||||
param: 'name',
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '编码',
|
||||
placeholder: '编码',
|
||||
param: 'code',
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '巷道',
|
||||
selectOptions: lane,
|
||||
placeholder: '请选择巷道',
|
||||
param: 'lane',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 20;
|
||||
this.listQuery.laneName = val.name;
|
||||
this.listQuery.laneCode = val.code;
|
||||
this.listQuery.lane = val.lane;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery = {
|
||||
pageSize: 20,
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
};
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'add':
|
||||
this.addOrEditTitle = '新增';
|
||||
this.addOrUpdateVisible = true;
|
||||
this.addOrUpdateHandle();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
324
src/views/areavisual/lineEdgeLibrary/add-or-updata.vue
Normal file
324
src/views/areavisual/lineEdgeLibrary/add-or-updata.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-15 09:16:36
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="80px">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="el-icon-s-grid" style="color: #fff"></i>
|
||||
</div>
|
||||
<div class="stat-title">库位信息</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ lineInfo.lineEdgeLibraryCode }}</div>
|
||||
<div class="stat-label">{{ lineInfo.lineEdgeLibraryName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="物料" prop="materialId">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dataForm.materialId"
|
||||
filterable
|
||||
@change="setMaterial"
|
||||
placeholder="请选择物料">
|
||||
<el-option
|
||||
v-for="item in productArr"
|
||||
:key="item.id"
|
||||
:label="
|
||||
item.materialCode +
|
||||
'-' +
|
||||
item.materialName +
|
||||
'-' +
|
||||
item.material
|
||||
"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="本盘长度" prop="cableLength">
|
||||
<el-input-number
|
||||
v-model="dataForm.cableLength"
|
||||
:min="0"
|
||||
:precision="2"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备" prop="equipmentId">
|
||||
<el-select
|
||||
v-model="dataForm.equipmentId"
|
||||
@change="setEquipment"
|
||||
placeholder="请选择绞体">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.id"
|
||||
:label="item.equipmentName"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="应用套号" prop="suite">
|
||||
<el-select v-model="dataForm.suite" placeholder="请选择应用套号">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<span v-if="dataForm.suite == 2">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="选择套号" prop="time">
|
||||
<el-date-picker
|
||||
v-model="dataForm.time"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="" prop="productionLine">
|
||||
<el-select v-model="dataForm.productionLine">
|
||||
<el-option
|
||||
v-for="item in options3"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="" prop="numb">
|
||||
<el-select v-model="dataForm.numb">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</span>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicAdd from '@/mixins/basic-add';
|
||||
import { getAllProductPage } from '@/api/ssdl/product&recipe';
|
||||
import {
|
||||
QKLineEdgeLibrary,
|
||||
getEquipmentPage,
|
||||
} from '@/api/areavisual/lineEdgeLibrary';
|
||||
import { parseTime } from '@/filter/code-filter';
|
||||
|
||||
export default {
|
||||
mixins: [basicAdd],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
createURL: QKLineEdgeLibrary,
|
||||
},
|
||||
dataForm: {
|
||||
id: undefined,
|
||||
materialId: undefined,
|
||||
materialName: undefined,
|
||||
materialCode: undefined,
|
||||
material: undefined,
|
||||
cableLength: undefined,
|
||||
equipmentId: undefined,
|
||||
equipmentName: undefined,
|
||||
suite: undefined, //是否成套
|
||||
suiteCode: undefined, //套号
|
||||
time: this.parseTime(new Date(), '{y}-{m}-{d}'),
|
||||
productionLine: undefined,
|
||||
numb: undefined,
|
||||
},
|
||||
lineInfo: {},
|
||||
productArr: [],
|
||||
options1: [],
|
||||
options2: [
|
||||
{
|
||||
value: 2,
|
||||
label: '是',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '否',
|
||||
},
|
||||
],
|
||||
options3: [
|
||||
{
|
||||
value: '6#',
|
||||
label: '6#',
|
||||
},
|
||||
{
|
||||
value: '7#',
|
||||
label: '7#',
|
||||
},
|
||||
{
|
||||
value: '8#',
|
||||
label: '8#',
|
||||
},
|
||||
],
|
||||
options4: [
|
||||
{
|
||||
value: 0,
|
||||
label: '0',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '1',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '2',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '3',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '4',
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: '5',
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '6',
|
||||
},
|
||||
],
|
||||
dataRule: {
|
||||
materialId: [
|
||||
{ required: true, message: '物料不能为空', trigger: 'change' },
|
||||
],
|
||||
time: [{ required: true, message: '不能为空', trigger: 'change' }],
|
||||
productionLine: [
|
||||
{ required: true, message: '不能为空', trigger: 'change' },
|
||||
],
|
||||
numb: [{ required: true, message: '不能为空', trigger: 'change' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showLine(val) {
|
||||
getAllProductPage().then((res) => {
|
||||
this.productArr = res.data;
|
||||
});
|
||||
getEquipmentPage({ pageNo: 1, pageSize: 100, equipmentType: 2 }).then(
|
||||
(res) => {
|
||||
this.options1 = res.data.list;
|
||||
}
|
||||
);
|
||||
this.lineInfo = { ...val };
|
||||
},
|
||||
setMaterial() {
|
||||
const data = this.productArr.find(
|
||||
(i) => i.id === this.dataForm.materialId
|
||||
);
|
||||
this.dataForm.materialName = data.materialName;
|
||||
this.dataForm.material = data.material;
|
||||
this.dataForm.materialCode = data.materialCode;
|
||||
},
|
||||
setEquipment() {
|
||||
const data = this.options1.find(
|
||||
(i) => i.id === this.dataForm.equipmentId
|
||||
);
|
||||
this.dataForm.equipmentName = data.equipmentName;
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
if (this.dataForm.suite == 2) {
|
||||
this.dataForm.suiteCode =
|
||||
this.dataForm.time +
|
||||
'-' +
|
||||
this.dataForm.productionLine +
|
||||
'-' +
|
||||
this.dataForm.numb;
|
||||
}
|
||||
QKLineEdgeLibrary({
|
||||
...this.lineInfo,
|
||||
...this.dataForm,
|
||||
lineEdgeLibraryState: 1,
|
||||
id: this.lineInfo.id,
|
||||
}).then((response) => {
|
||||
this.$modal.msgSuccess('操作成功');
|
||||
this.visible = false;
|
||||
this.$emit('refreshDataList');
|
||||
});
|
||||
return;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid;
|
||||
border-color: #1a56db;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* .stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
} */
|
||||
.stat-title {
|
||||
margin: 0 10px;
|
||||
color: #0051ff;
|
||||
font-size: 20px;
|
||||
}
|
||||
.stat-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
margin-right: 15px;
|
||||
background: linear-gradient(to right, #1a56db, #0d47a1);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #1a56db;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
318
src/views/areavisual/lineEdgeLibrary/index.vue
Normal file
318
src/views/areavisual/lineEdgeLibrary/index.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="tableData"
|
||||
@emitFun="getDataList">
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="110"
|
||||
label="操作"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick" />
|
||||
</base-table>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<base-dialog
|
||||
:dialogTitle="addOrEditTitle"
|
||||
:dialogVisible="addOrUpdateVisible"
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
destroy-on-close
|
||||
width="50%">
|
||||
<add-or-update
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="successSubmit"></add-or-update>
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddOrUpdate from './add-or-updata';
|
||||
import basicPage from '@/mixins/basic-page';
|
||||
import { parseTime } from '@/filter/code-filter';
|
||||
import {
|
||||
deleteLineEdgeLibrary,
|
||||
getLineEdgeLibraryPage,
|
||||
QKLineEdgeLibrary,
|
||||
} from '@/api/areavisual/lineEdgeLibrary';
|
||||
|
||||
const laneRow = [
|
||||
{
|
||||
id: '1',
|
||||
name: '第一排',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '第二排',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '第三排',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '第四排',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: '第五排',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: '第六排',
|
||||
},
|
||||
];
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'lineEdgeLibraryCode',
|
||||
label: '线边库编码',
|
||||
},
|
||||
{
|
||||
prop: 'lineEdgeLibraryName',
|
||||
label: '线边库名称',
|
||||
},
|
||||
{
|
||||
prop: 'agvGroundCode',
|
||||
label: 'agv码',
|
||||
},
|
||||
{
|
||||
prop: 'lineEdgeLibraryState',
|
||||
label: '线边库状态',
|
||||
width: 90,
|
||||
filter: (val) => {
|
||||
return val ? '满位' : '空闲';
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'usableState',
|
||||
label: '是否可用',
|
||||
width: 90,
|
||||
filter: (val) => {
|
||||
return ['', '可用', '不可用', '锁定'][val];
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'trayType',
|
||||
label: '托盘类型',
|
||||
width: 90,
|
||||
filter: (val) => {
|
||||
return val ? '笼式' : '盘式';
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'productionLine',
|
||||
label: '产线',
|
||||
},
|
||||
{
|
||||
prop: 'equipmentName',
|
||||
label: '设备',
|
||||
},
|
||||
{
|
||||
prop: 'suiteCode',
|
||||
label: '套号',
|
||||
},
|
||||
{
|
||||
prop: 'laneRow',
|
||||
label: '巷道排',
|
||||
filter: (val) => {
|
||||
return laneRow.find((i) => i.id == val)
|
||||
? laneRow.find((i) => i.id == val).name
|
||||
: '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'materialCode',
|
||||
label: '物料',
|
||||
},
|
||||
{
|
||||
prop: 'batch',
|
||||
label: '批次',
|
||||
},
|
||||
{
|
||||
prop: 'cableLength',
|
||||
label: '线缆长度',
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
filter: parseTime,
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getLineEdgeLibraryPage,
|
||||
deleteURL: deleteLineEdgeLibrary,
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
tableBtn: [
|
||||
{
|
||||
type: 'clear',
|
||||
btnName: '清空',
|
||||
},
|
||||
{
|
||||
type: 'add',
|
||||
btnName: '添加',
|
||||
},
|
||||
].filter((v) => v),
|
||||
formConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '线边库名称',
|
||||
placeholder: '线边库名称',
|
||||
param: 'name',
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '线边库编码',
|
||||
placeholder: '线边库编码',
|
||||
param: 'code',
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '巷道排',
|
||||
selectOptions: laneRow,
|
||||
placeholder: '请选择巷道排',
|
||||
param: 'laneRow',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '重置',
|
||||
// name: 'reset',
|
||||
// },
|
||||
// {
|
||||
// type: 'separate',
|
||||
// },
|
||||
// {
|
||||
// type: 'button',
|
||||
// btnName: '新增',
|
||||
// name: 'add',
|
||||
// color: 'success',
|
||||
// plain: true,
|
||||
// },
|
||||
// {
|
||||
// type: this.$auth.hasPermi('base:factory:create') ? 'separate' : '',
|
||||
// },
|
||||
// {
|
||||
// type: this.$auth.hasPermi('base:factory:export') ? 'button' : '',
|
||||
// btnName: '导出',
|
||||
// name: 'export',
|
||||
// color: 'warning',
|
||||
// },
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 20;
|
||||
this.listQuery.lineEdgeLibraryName = val.name;
|
||||
this.listQuery.lineEdgeLibraryCode = val.code;
|
||||
this.listQuery.laneRow = val.laneRow;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery = {
|
||||
pageSize: 20,
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
};
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'add':
|
||||
this.addOrEditTitle = '新增';
|
||||
this.addOrUpdateVisible = true;
|
||||
this.addOrUpdateHandle();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
otherMethods(val) {
|
||||
if (val.type == 'clear') {
|
||||
if (val.data.usableState == 3) {
|
||||
this.$confirm(
|
||||
`当前库位为锁定状态，代表该库位有未完成的任务关联，是否确认清空${
|
||||
'线边库名称为 ' + val.data.lineEdgeLibraryName + ' '
|
||||
}的数据项?`,
|
||||
'锁定库位清空提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
QKLineEdgeLibrary({...val.data,lineEdgeLibraryState:0,usableState:1 }).then(({ data }) => {
|
||||
this.$message({
|
||||
message: data,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getDataList();
|
||||
},
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
QKLineEdgeLibrary({...val.data,lineEdgeLibraryState:0,usableState:1 }).then(({ data }) => {
|
||||
this.$message({
|
||||
message: data,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getDataList();
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
} else if (val.type === 'add') {
|
||||
this.addOrEditTitle = '添加货物';
|
||||
this.addOrUpdateVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init();
|
||||
this.$refs.addOrUpdate.showLine(val.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
324
src/views/areavisual/overview/components/add-or-updata.vue
Normal file
324
src/views/areavisual/overview/components/add-or-updata.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-15 09:16:36
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="80px">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="el-icon-s-grid" style="color: #fff"></i>
|
||||
</div>
|
||||
<div class="stat-title">库位信息</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ lineInfo.lineEdgeLibraryCode }}</div>
|
||||
<div class="stat-label">{{ lineInfo.lineEdgeLibraryName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="物料" prop="materialId">
|
||||
<el-select
|
||||
style="width: 100%"
|
||||
v-model="dataForm.materialId"
|
||||
filterable
|
||||
@change="setMaterial"
|
||||
placeholder="请选择物料">
|
||||
<el-option
|
||||
v-for="item in productArr"
|
||||
:key="item.id"
|
||||
:label="
|
||||
item.materialCode +
|
||||
'-' +
|
||||
item.materialName +
|
||||
'-' +
|
||||
item.material
|
||||
"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="本盘长度" prop="cableLength">
|
||||
<el-input-number
|
||||
v-model="dataForm.cableLength"
|
||||
:min="0"
|
||||
:precision="2"></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="设备" prop="equipmentId">
|
||||
<el-select
|
||||
v-model="dataForm.equipmentId"
|
||||
@change="setEquipment"
|
||||
placeholder="请选择绞体">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.id"
|
||||
:label="item.equipmentName"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="应用套号" prop="suite">
|
||||
<el-select v-model="dataForm.suite" placeholder="请选择应用套号">
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<span v-if="dataForm.suite == 2">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="选择套号" prop="time">
|
||||
<el-date-picker
|
||||
v-model="dataForm.time"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="" prop="productionLine">
|
||||
<el-select v-model="dataForm.productionLine">
|
||||
<el-option
|
||||
v-for="item in options3"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="" prop="numb">
|
||||
<el-select v-model="dataForm.numb">
|
||||
<el-option
|
||||
v-for="item in options4"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</span>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicAdd from '@/mixins/basic-add';
|
||||
import { getAllProductPage } from '@/api/ssdl/product&recipe';
|
||||
import {
|
||||
QKLineEdgeLibrary,
|
||||
getEquipmentPage,
|
||||
} from '@/api/areavisual/lineEdgeLibrary';
|
||||
import { parseTime } from '@/filter/code-filter';
|
||||
|
||||
export default {
|
||||
mixins: [basicAdd],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
createURL: QKLineEdgeLibrary,
|
||||
},
|
||||
dataForm: {
|
||||
id: undefined,
|
||||
materialId: undefined,
|
||||
materialName: undefined,
|
||||
materialCode: undefined,
|
||||
material: undefined,
|
||||
cableLength: undefined,
|
||||
equipmentId: undefined,
|
||||
equipmentName: undefined,
|
||||
suite: undefined, //是否成套
|
||||
suiteCode: undefined, //套号
|
||||
time: this.parseTime(new Date(), '{y}-{m}-{d}'),
|
||||
productionLine: undefined,
|
||||
numb: undefined,
|
||||
},
|
||||
lineInfo: {},
|
||||
productArr: [],
|
||||
options1: [],
|
||||
options2: [
|
||||
{
|
||||
value: 2,
|
||||
label: '是',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '否',
|
||||
},
|
||||
],
|
||||
options3: [
|
||||
{
|
||||
value: '6#',
|
||||
label: '6#',
|
||||
},
|
||||
{
|
||||
value: '7#',
|
||||
label: '7#',
|
||||
},
|
||||
{
|
||||
value: '8#',
|
||||
label: '8#',
|
||||
},
|
||||
],
|
||||
options4: [
|
||||
{
|
||||
value: 0,
|
||||
label: '0',
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '1',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '2',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '3',
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: '4',
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: '5',
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: '6',
|
||||
},
|
||||
],
|
||||
dataRule: {
|
||||
materialId: [
|
||||
{ required: true, message: '物料不能为空', trigger: 'change' },
|
||||
],
|
||||
time: [{ required: true, message: '不能为空', trigger: 'change' }],
|
||||
productionLine: [
|
||||
{ required: true, message: '不能为空', trigger: 'change' },
|
||||
],
|
||||
numb: [{ required: true, message: '不能为空', trigger: 'change' }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showLine(val) {
|
||||
getAllProductPage().then((res) => {
|
||||
this.productArr = res.data;
|
||||
});
|
||||
getEquipmentPage({ pageNo: 1, pageSize: 100, equipmentType: 2 }).then(
|
||||
(res) => {
|
||||
this.options1 = res.data.list;
|
||||
}
|
||||
);
|
||||
this.lineInfo = { ...val };
|
||||
},
|
||||
setMaterial() {
|
||||
const data = this.productArr.find(
|
||||
(i) => i.id === this.dataForm.materialId
|
||||
);
|
||||
this.dataForm.materialName = data.materialName;
|
||||
this.dataForm.material = data.material;
|
||||
this.dataForm.materialCode = data.materialCode;
|
||||
},
|
||||
setEquipment() {
|
||||
const data = this.options1.find(
|
||||
(i) => i.id === this.dataForm.equipmentId
|
||||
);
|
||||
this.dataForm.equipmentName = data.equipmentName;
|
||||
},
|
||||
// 表单提交
|
||||
dataFormSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
if (this.dataForm.suite == 2) {
|
||||
this.dataForm.suiteCode =
|
||||
this.dataForm.time +
|
||||
'-' +
|
||||
this.dataForm.productionLine +
|
||||
'-' +
|
||||
this.dataForm.numb;
|
||||
}
|
||||
QKLineEdgeLibrary({
|
||||
...this.lineInfo,
|
||||
...this.dataForm,
|
||||
lineEdgeLibraryState: 1,
|
||||
id: this.lineInfo.id,
|
||||
}).then((response) => {
|
||||
this.$modal.msgSuccess('操作成功');
|
||||
this.visible = false;
|
||||
this.$emit('refreshDataList');
|
||||
});
|
||||
return;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid;
|
||||
border-color: #1a56db;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* .stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
} */
|
||||
.stat-title {
|
||||
margin: 0 10px;
|
||||
color: #0051ff;
|
||||
font-size: 20px;
|
||||
}
|
||||
.stat-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
margin-right: 15px;
|
||||
background: linear-gradient(to right, #1a56db, #0d47a1);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #1a56db;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
@@ -1,262 +1,665 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row class="overview-container">
|
||||
<el-col :span="4" class="overview-container-left">
|
||||
<el-row style="font-size: 18px; font-weight: bold; line-height: 36px">库区选择</el-row>
|
||||
<el-input
|
||||
v-model="areaSearchForm.regionName"
|
||||
placeholder="库区名称"
|
||||
@blur="getArea"
|
||||
clearable
|
||||
/>
|
||||
<el-tree
|
||||
:data="areaList"
|
||||
:node-key="'id'"
|
||||
:props="{label: 'regionName'}"
|
||||
@node-click="nodeClick"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="16" v-if="changeType === 0" class="overview-container-main">
|
||||
<el-row>
|
||||
<el-col :span="8" class="allarea-box" v-for="item in allAreaList" :key="item.id">
|
||||
<div class="areainfo-box">
|
||||
<div class="areainfo-box-header">
|
||||
{{ item.regionName }}
|
||||
</div>
|
||||
<div class="areainfo-box-line">
|
||||
<div class="areainfo-box-line-item" :style="{width: `${(item.occupiedQuantity / (item.totalInventory + item.transitQuantity) * 100).toFixed(2)}%`, backgroundColor: '#33B36B'}"></div>
|
||||
<div class="areainfo-box-line-item" :style="{width: `${(item.idleQuantity / (item.totalInventory + item.transitQuantity) * 100).toFixed(2)}%`, backgroundColor: '#3A8DFF'}"></div>
|
||||
<div class="areainfo-box-line-item" :style="{width: `${(item.transitQuantity / (item.totalInventory + item.transitQuantity) * 100).toFixed(2)}%`, backgroundColor: '#F59A23'}"></div>
|
||||
</div>
|
||||
<el-row class="areainfo-box-info">
|
||||
<el-col class="areainfo-box-info-item" :span="6">
|
||||
<p class="areainfo-box-info-item-count">{{item.totalInventory}}</p>
|
||||
<p class="areainfo-box-info-item-title">库位总数</p>
|
||||
</el-col>
|
||||
<el-col class="areainfo-box-info-item" :span="6">
|
||||
<p class="areainfo-box-info-item-count" style="color: #33B36B">{{item.occupiedQuantity}}</p>
|
||||
<p class="areainfo-box-info-item-title">占</p>
|
||||
</el-col>
|
||||
<el-col class="areainfo-box-info-item" :span="6">
|
||||
<p class="areainfo-box-info-item-count" style="color: #3A8DFF">{{item.idleQuantity}}</p>
|
||||
<p class="areainfo-box-info-item-title">空</p>
|
||||
</el-col>
|
||||
<el-col class="areainfo-box-info-item" :span="6">
|
||||
<p class="areainfo-box-info-item-count" style="color: #F59A23">{{item.transitQuantity}}</p>
|
||||
<p class="areainfo-box-info-item-title">在途</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="4" v-if="changeType === 0" class="overview-container-right">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClickRight">
|
||||
<el-tab-pane label="概览" name="first">
|
||||
<el-row class="overview-container-right-alloverview">
|
||||
<el-col class="overview-container-right-alloverview-item" :span="8">
|
||||
<p class="overview-container-right-alloverview-item-count">{{allAreaInfo.totalInventory}}</p>
|
||||
<p class="overview-container-right-alloverview-item-title">库位总数</p>
|
||||
</el-col>
|
||||
<el-col class="overview-container-right-alloverview-item" :span="8">
|
||||
<p class="overview-container-right-alloverview-item-count">{{allAreaInfo.occupiedQuantity}}</p>
|
||||
<p class="overview-container-right-alloverview-item-title">当前满位</p>
|
||||
</el-col>
|
||||
<el-col class="overview-container-right-alloverview-item" :span="8">
|
||||
<p class="overview-container-right-alloverview-item-count">{{allAreaInfo.idleQuantity}}</p>
|
||||
<p class="overview-container-right-alloverview-item-title">当前空位</p>
|
||||
</el-col>
|
||||
<el-col class="overview-container-right-alloverview-item" :span="8">
|
||||
<p class="overview-container-right-alloverview-item-count">{{allAreaInfo.transitQuantity}}</p>
|
||||
<p class="overview-container-right-alloverview-item-title">在途</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<ringChart :ring-data="allAreaInfo" ref="ringChart" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="在途任务" name="second">在途任务</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
<el-col :span="20" v-if="changeType === 1" class="overview-container-main"></el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import basicPage from '@/mixins/basic-page';
|
||||
import ringChart from './components/ringChart.vue';
|
||||
import { getAreaList, postAllAreaInfo, postAllAreaOverview, postAreaInfo } from '@/api/areavisual/overview';
|
||||
|
||||
export default {
|
||||
name: 'overview',
|
||||
// mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
areaList: [
|
||||
{
|
||||
id: 0,
|
||||
regionName: "全部库区"
|
||||
}
|
||||
],
|
||||
areaSearchForm: {
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
regionName: ''
|
||||
},
|
||||
changeType: 0,
|
||||
allAreaList: [],
|
||||
allAreaInfo: {
|
||||
totalInventory: 0,
|
||||
occupiedQuantity: 0,
|
||||
idleQuantity: 0,
|
||||
transitQuantity: 0
|
||||
},
|
||||
areaInfo: [],
|
||||
activeName: 'first'
|
||||
};
|
||||
},
|
||||
components: {
|
||||
ringChart
|
||||
},
|
||||
async created() {
|
||||
this.getArea()
|
||||
this.getAllAreaInfo()
|
||||
this.getAllAreaOverview()
|
||||
},
|
||||
watch: {
|
||||
activeName: (val) => {
|
||||
if (val === 'first') {
|
||||
this.getAllAreaOverview()
|
||||
} else if (val === 'second') {
|
||||
this.getNowTaskList()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取库区列表
|
||||
async getArea() {
|
||||
const res = await getAreaList(this.areaSearchForm)
|
||||
if (res.code === 0 && res.data) {
|
||||
this.areaList = [
|
||||
{
|
||||
id: 0,
|
||||
regionName: "全部库区"
|
||||
}
|
||||
],
|
||||
this.areaList.push(...(res.data.list))
|
||||
}
|
||||
},
|
||||
// 库区选择
|
||||
nodeClick(data, node, components) {
|
||||
if (data.id === 0) {
|
||||
this.changeType = 0
|
||||
this.activeName = 'first'
|
||||
this.getAllAreaInfo()
|
||||
} else {
|
||||
this.changeType = 1
|
||||
this.getAreaInfo(data.id)
|
||||
}
|
||||
},
|
||||
// 获取全部库区概览信息
|
||||
async getAllAreaInfo() {
|
||||
const res = await postAllAreaInfo([])
|
||||
console.log(res)
|
||||
if (res.code === 0 && res.data) {
|
||||
this.allAreaList = res.data
|
||||
}
|
||||
},
|
||||
// 获取库区概览
|
||||
async getAllAreaOverview() {
|
||||
const res = await postAllAreaOverview([])
|
||||
console.log(res)
|
||||
if (res.code === 0 && res.data) {
|
||||
this.allAreaInfo = res.data
|
||||
this.$refs.ringChart.initChart();
|
||||
}
|
||||
},
|
||||
// 获取在途任务
|
||||
async getNowTaskList() {},
|
||||
// 获取单库区信息
|
||||
async getAreaInfo (id) {
|
||||
const res = await postAreaInfo({id})
|
||||
console.log(res)
|
||||
if (res.code === 0 && res.data) {
|
||||
this.areaInfo = res.data
|
||||
}
|
||||
},
|
||||
// 全部库区右侧分页点击
|
||||
handleClickRight (tab, event) {
|
||||
console.log(tab, event)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.overview-container {
|
||||
max-height: calc(100vh - 120px - 8px);
|
||||
overflow: scroll;
|
||||
.overview-container-left {
|
||||
padding-right: 12px;
|
||||
}
|
||||
.overview-container-main {
|
||||
.allarea-box {
|
||||
padding: 10px;
|
||||
.areainfo-box {
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
.areainfo-box-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis; /* 溢出部分显示省略号 */
|
||||
}
|
||||
.areainfo-box-line {
|
||||
width: 100%;
|
||||
.areainfo-box-line-item {
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.areainfo-box-info {
|
||||
.areainfo-box-info-item {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
.areainfo-box-info-item-count {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.overview-container-right {
|
||||
.overview-container-right-alloverview {
|
||||
.overview-container-right-alloverview-item {
|
||||
text-align: center;
|
||||
.overview-container-right-alloverview-item-count {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-tree-node__content {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.el-tree-node__label {
|
||||
display: block;
|
||||
width: calc(100% - 24px);
|
||||
text-align: center;
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis; /* 溢出部分显示省略号 */
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-row class="overview-container">
|
||||
<el-col :span="4" class="overview-container-left">
|
||||
<el-row style="font-size: 18px; font-weight: bold; line-height: 36px">
|
||||
库区选择
|
||||
</el-row>
|
||||
<el-input
|
||||
v-model="areaSearchForm.regionName"
|
||||
placeholder="库区名称"
|
||||
@blur="getArea"
|
||||
clearable />
|
||||
<el-tree
|
||||
:data="areaList"
|
||||
:node-key="'id'"
|
||||
:props="{ label: 'regionName' }"
|
||||
@node-click="nodeClick" />
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="16"
|
||||
v-if="changeType === 0"
|
||||
class="overview-container-main">
|
||||
<el-row>
|
||||
<el-col
|
||||
:span="8"
|
||||
class="allarea-box"
|
||||
v-for="item in allAreaList"
|
||||
:key="item.id">
|
||||
<div class="areainfo-box">
|
||||
<div class="areainfo-box-header">
|
||||
{{ item.regionName }}
|
||||
</div>
|
||||
<div class="areainfo-box-line">
|
||||
<div
|
||||
class="areainfo-box-line-item"
|
||||
:style="{
|
||||
width: `${(
|
||||
(item.occupiedQuantity /
|
||||
(item.totalInventory + item.transitQuantity)) *
|
||||
100
|
||||
).toFixed(2)}%`,
|
||||
backgroundColor: '#33B36B',
|
||||
}"></div>
|
||||
<div
|
||||
class="areainfo-box-line-item"
|
||||
:style="{
|
||||
width: `${(
|
||||
(item.idleQuantity /
|
||||
(item.totalInventory + item.transitQuantity)) *
|
||||
100
|
||||
).toFixed(2)}%`,
|
||||
backgroundColor: '#3A8DFF',
|
||||
}"></div>
|
||||
<div
|
||||
class="areainfo-box-line-item"
|
||||
:style="{
|
||||
width: `${(
|
||||
(item.transitQuantity /
|
||||
(item.totalInventory + item.transitQuantity)) *
|
||||
100
|
||||
).toFixed(2)}%`,
|
||||
backgroundColor: '#F59A23',
|
||||
}"></div>
|
||||
</div>
|
||||
<el-row class="areainfo-box-info">
|
||||
<el-col class="areainfo-box-info-item" :span="6">
|
||||
<p class="areainfo-box-info-item-count">
|
||||
{{ item.totalInventory }}
|
||||
</p>
|
||||
<p class="areainfo-box-info-item-title">库位总数</p>
|
||||
</el-col>
|
||||
<el-col class="areainfo-box-info-item" :span="6">
|
||||
<p
|
||||
class="areainfo-box-info-item-count"
|
||||
style="color: #33b36b">
|
||||
{{ item.occupiedQuantity }}
|
||||
</p>
|
||||
<p class="areainfo-box-info-item-title">占</p>
|
||||
</el-col>
|
||||
<el-col class="areainfo-box-info-item" :span="6">
|
||||
<p
|
||||
class="areainfo-box-info-item-count"
|
||||
style="color: #3a8dff">
|
||||
{{ item.idleQuantity }}
|
||||
</p>
|
||||
<p class="areainfo-box-info-item-title">空</p>
|
||||
</el-col>
|
||||
<el-col class="areainfo-box-info-item" :span="6">
|
||||
<p
|
||||
class="areainfo-box-info-item-count"
|
||||
style="color: #f59a23">
|
||||
{{ item.transitQuantity }}
|
||||
</p>
|
||||
<p class="areainfo-box-info-item-title">在途</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="4"
|
||||
v-if="changeType === 0"
|
||||
class="overview-container-right">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClickRight">
|
||||
<el-tab-pane label="概览" name="first">
|
||||
<el-row class="overview-container-right-alloverview">
|
||||
<el-col
|
||||
class="overview-container-right-alloverview-item"
|
||||
:span="8">
|
||||
<p class="overview-container-right-alloverview-item-count">
|
||||
{{ allAreaInfo.totalInventory }}
|
||||
</p>
|
||||
<p class="overview-container-right-alloverview-item-title">
|
||||
库位总数
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col
|
||||
class="overview-container-right-alloverview-item"
|
||||
:span="8">
|
||||
<p class="overview-container-right-alloverview-item-count">
|
||||
{{ allAreaInfo.occupiedQuantity }}
|
||||
</p>
|
||||
<p class="overview-container-right-alloverview-item-title">
|
||||
当前满位
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col
|
||||
class="overview-container-right-alloverview-item"
|
||||
:span="8">
|
||||
<p class="overview-container-right-alloverview-item-count">
|
||||
{{ allAreaInfo.idleQuantity }}
|
||||
</p>
|
||||
<p class="overview-container-right-alloverview-item-title">
|
||||
当前空位
|
||||
</p>
|
||||
</el-col>
|
||||
<el-col
|
||||
class="overview-container-right-alloverview-item"
|
||||
:span="8">
|
||||
<p class="overview-container-right-alloverview-item-count">
|
||||
{{ allAreaInfo.transitQuantity }}
|
||||
</p>
|
||||
<p class="overview-container-right-alloverview-item-title">
|
||||
在途
|
||||
</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<ringChart :ring-data="allAreaInfo" ref="ringChart" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="在途任务" name="second">在途任务</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="20"
|
||||
v-if="changeType === 1"
|
||||
class="overview-container-main">
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="el-icon-s-grid" style="color: #fff"></i>
|
||||
</div>
|
||||
<div class="stat-title">库区信息</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value">{{ getAreaInfoInfo.regionName }}</div>
|
||||
<div class="stat-label">{{ getAreaInfoInfo.regionCode }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area-body">
|
||||
<div v-for="item in Object.keys(areaInfo)" :key="item">
|
||||
<div class="potTitle">{{ item }}</div>
|
||||
<div class="potList">
|
||||
<div v-for="sitem in areaInfo[item]" :key="sitem.id">
|
||||
<div v-if="sitem.empty" class="area-div-empty" />
|
||||
<div v-else class="area-div" :title="sitem.lineEdgeLibraryName">
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
:title="sitem.lineEdgeLibraryCode"
|
||||
width="200"
|
||||
trigger="hover">
|
||||
<div class="point" />
|
||||
<span style="font-weight: 600">名称:</span>
|
||||
{{ sitem.lineEdgeLibraryName }}
|
||||
<br />
|
||||
<div class="point" />
|
||||
<span style="font-weight: 600">状态:</span>
|
||||
{{
|
||||
sitem.usableState == 3
|
||||
? '锁定'
|
||||
: sitem.usableState == 2
|
||||
? '不可用'
|
||||
: sitem.lineEdgeLibraryState == 1
|
||||
? '满位'
|
||||
: '空闲'
|
||||
}}
|
||||
<br />
|
||||
<span
|
||||
v-if="
|
||||
sitem.usableState == 1 &&
|
||||
sitem.lineEdgeLibraryState == 1
|
||||
">
|
||||
<span style="font-weight: 600">物料:</span>
|
||||
{{ sitem.materialCode || '' }}
|
||||
<br />
|
||||
<span style="font-weight: 600">设备:</span>
|
||||
{{ sitem.equipmentName || '' }}
|
||||
<br />
|
||||
<span style="font-weight: 600">套号:</span>
|
||||
{{ sitem.suiteCode || '' }}
|
||||
<br />
|
||||
</span>
|
||||
<el-button type="text" @click="clearLine(sitem)">
|
||||
清空
|
||||
</el-button>
|
||||
<el-button type="text" @click="addLine(sitem)">
|
||||
添加
|
||||
</el-button>
|
||||
<div
|
||||
class="area-icon"
|
||||
:style="{
|
||||
backgroundColor:
|
||||
sitem.usableState == 3
|
||||
? '#E6A23C'
|
||||
: sitem.usableState == 2
|
||||
? 'gray'
|
||||
: sitem.lineEdgeLibraryState == 1
|
||||
? '#67C23A'
|
||||
: '',
|
||||
}"
|
||||
slot="reference">
|
||||
<i
|
||||
:class="
|
||||
sitem.usableState == 3
|
||||
? 'el-icon-lock'
|
||||
: 'el-icon-s-grid'
|
||||
"
|
||||
style="color: #fff"></i>
|
||||
</div>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<base-dialog
|
||||
:dialogTitle="addOrEditTitle"
|
||||
:dialogVisible="addOrUpdateVisible"
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
destroy-on-close
|
||||
width="50%">
|
||||
<add-or-update
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="successSubmit"></add-or-update>
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import basicPage from '@/mixins/basic-page';
|
||||
import ringChart from './components/ringChart.vue';
|
||||
import AddOrUpdate from './components/add-or-updata';
|
||||
import basicPage from '@/mixins/basic-page';
|
||||
import {
|
||||
getAreaList,
|
||||
postAllAreaInfo,
|
||||
postAllAreaOverview,
|
||||
postAreaInfo,
|
||||
} from '@/api/areavisual/overview';
|
||||
import { QKLineEdgeLibrary } from '@/api/areavisual/lineEdgeLibrary';
|
||||
|
||||
export default {
|
||||
name: 'overview',
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
areaList: [
|
||||
{
|
||||
id: 0,
|
||||
regionName: '全部库区',
|
||||
},
|
||||
],
|
||||
areaSearchForm: {
|
||||
pageNo: 1,
|
||||
pageSize: 100,
|
||||
regionName: '',
|
||||
},
|
||||
changeType: 0,
|
||||
allAreaList: [],
|
||||
allAreaInfo: {
|
||||
totalInventory: 0,
|
||||
occupiedQuantity: 0,
|
||||
idleQuantity: 0,
|
||||
transitQuantity: 0,
|
||||
},
|
||||
areaInfo: {},
|
||||
activeName: 'first',
|
||||
getAreaInfoInfo: {},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
ringChart,
|
||||
AddOrUpdate,
|
||||
},
|
||||
async created() {
|
||||
this.getArea();
|
||||
this.getAllAreaInfo();
|
||||
this.getAllAreaOverview();
|
||||
},
|
||||
watch: {
|
||||
activeName: (val) => {
|
||||
if (val === 'first') {
|
||||
this.getAllAreaOverview();
|
||||
} else if (val === 'second') {
|
||||
this.getNowTaskList();
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 获取库区列表
|
||||
async getArea() {
|
||||
const res = await getAreaList(this.areaSearchForm);
|
||||
if (res.code === 0 && res.data) {
|
||||
(this.areaList = [
|
||||
{
|
||||
id: 0,
|
||||
regionName: '全部库区',
|
||||
},
|
||||
]),
|
||||
this.areaList.push(...res.data.list);
|
||||
}
|
||||
},
|
||||
// 库区选择
|
||||
nodeClick(data, node, components) {
|
||||
if (data.id === 0) {
|
||||
this.changeType = 0;
|
||||
this.activeName = 'first';
|
||||
this.getAllAreaInfo();
|
||||
} else {
|
||||
this.getAreaInfoInfo = data; //把库区存下，方便刷新
|
||||
this.changeType = 1;
|
||||
this.getAreaInfo(data.id);
|
||||
}
|
||||
},
|
||||
// 获取全部库区概览信息
|
||||
async getAllAreaInfo() {
|
||||
const res = await postAllAreaInfo([]);
|
||||
console.log(res);
|
||||
if (res.code === 0 && res.data) {
|
||||
this.allAreaList = res.data;
|
||||
}
|
||||
},
|
||||
// 获取库区概览
|
||||
async getAllAreaOverview() {
|
||||
const res = await postAllAreaOverview([]);
|
||||
console.log(res);
|
||||
if (res.code === 0 && res.data) {
|
||||
this.allAreaInfo = res.data;
|
||||
this.$refs.ringChart.initChart();
|
||||
}
|
||||
},
|
||||
// 获取在途任务
|
||||
async getNowTaskList() {},
|
||||
// 获取单库区信息
|
||||
async getAreaInfo(id) {
|
||||
const res = await postAreaInfo({ id });
|
||||
if (res.code === 0 && res.data) {
|
||||
// 按巷道号分组
|
||||
this.areaInfo = res.data.reduce((result, item) => {
|
||||
// 提取巷道号
|
||||
const laneNumber = item.lineEdgeLibraryCode.substring(3, 5) + ' 巷道';
|
||||
|
||||
// 如果该巷道还没有分组，创建一个空数组
|
||||
if (!result[laneNumber]) {
|
||||
result[laneNumber] = [];
|
||||
}
|
||||
|
||||
// 将当前项添加到对应巷道的数组中
|
||||
result[laneNumber].push(item);
|
||||
|
||||
return result;
|
||||
}, {});
|
||||
Object.keys(this.areaInfo).forEach((key) => {
|
||||
const arr = this.areaInfo[key];
|
||||
let emptyNum = 0;
|
||||
let insetEmpty = [];
|
||||
arr.forEach((item, index) => {
|
||||
if (
|
||||
!item.empty &&
|
||||
item.lineEdgeLibraryCode.substring(5, 7) !=
|
||||
Math.floor(index / 2) + 1 + emptyNum &&
|
||||
item.lineEdgeLibraryCode[item.lineEdgeLibraryCode.length - 1] ==
|
||||
'L'
|
||||
) {
|
||||
let num =
|
||||
Number(item.lineEdgeLibraryCode.substring(5, 7)) -
|
||||
(Math.floor(index / 2) + 1 + emptyNum);
|
||||
insetEmpty.push({
|
||||
index,
|
||||
num,
|
||||
});
|
||||
emptyNum += num;
|
||||
}
|
||||
});
|
||||
insetEmpty.forEach((item) => {
|
||||
const arrEmpty = Array.from({ length: item.num * 2 }, () => ({
|
||||
empty: true,
|
||||
}));
|
||||
arr.splice(item.index, 0, ...arrEmpty);
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
getDataList() {},
|
||||
// 全部库区右侧分页点击
|
||||
handleClickRight(tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
clearLine(val) {
|
||||
if (val.usableState == 3) {
|
||||
this.$confirm(
|
||||
`当前库位为锁定状态，代表该库位有未完成的任务关联，是否确认清空${
|
||||
'线边库名称为 ' + val.lineEdgeLibraryName + ' '
|
||||
}的数据项?`,
|
||||
'锁定库位清空提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
QKLineEdgeLibrary({
|
||||
...val,
|
||||
lineEdgeLibraryState: 0,
|
||||
usableState: 1,
|
||||
}).then(({ data }) => {
|
||||
this.$message({
|
||||
message: data,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getAreaInfo(this.getAreaInfoInfo.id);
|
||||
},
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
QKLineEdgeLibrary({
|
||||
...val,
|
||||
lineEdgeLibraryState: 0,
|
||||
usableState: 1,
|
||||
}).then(({ data }) => {
|
||||
this.$message({
|
||||
message: data,
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.getAreaInfo(this.getAreaInfoInfo.id);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
addLine(val) {
|
||||
this.addOrEditTitle = '添加货物';
|
||||
this.addOrUpdateVisible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init();
|
||||
this.$refs.addOrUpdate.showLine(val);
|
||||
});
|
||||
},
|
||||
// dialog的父组件方法this.$emit("refreshDataList");
|
||||
successSubmit() {
|
||||
this.handleCancel();
|
||||
this.getAreaInfo(this.getAreaInfoInfo.id);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.overview-container {
|
||||
max-height: calc(100vh - 120px - 8px);
|
||||
overflow: scroll;
|
||||
.overview-container-left {
|
||||
padding-right: 12px;
|
||||
}
|
||||
.overview-container-main {
|
||||
.allarea-box {
|
||||
padding: 10px;
|
||||
.areainfo-box {
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
.areainfo-box-header {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis; /* 溢出部分显示省略号 */
|
||||
}
|
||||
.areainfo-box-line {
|
||||
width: 100%;
|
||||
.areainfo-box-line-item {
|
||||
height: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.areainfo-box-info {
|
||||
.areainfo-box-info-item {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
.areainfo-box-info-item-count {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.overview-container-right {
|
||||
.overview-container-right-alloverview {
|
||||
.overview-container-right-alloverview-item {
|
||||
text-align: center;
|
||||
.overview-container-right-alloverview-item-count {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.el-tree-node__content {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.el-tree-node__label {
|
||||
display: block;
|
||||
width: calc(100% - 24px);
|
||||
text-align: center;
|
||||
white-space: nowrap; /* 禁止换行 */
|
||||
overflow: hidden; /* 隐藏溢出内容 */
|
||||
text-overflow: ellipsis; /* 溢出部分显示省略号 */
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.area-body {
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
overflow-x: auto;
|
||||
display: flex;
|
||||
}
|
||||
.potTitle {
|
||||
width: 190px;
|
||||
background-color: rgb(169, 235, 249);
|
||||
border-radius: 3px;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.potList {
|
||||
width: 190px;
|
||||
display: grid;
|
||||
grid-template-columns: 90px 90px;
|
||||
gap: 8px;
|
||||
}
|
||||
.area-div {
|
||||
padding: 10px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border: 4px solid #1a56db;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.area-div-empty {
|
||||
background: white;
|
||||
width: 90px;
|
||||
height: 88px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.point {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: #409eff;
|
||||
float: left;
|
||||
margin-top: 7px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.area-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: auto;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.stat-card {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border-left: 4px solid;
|
||||
border-color: #1a56db;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* .stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
} */
|
||||
.stat-title {
|
||||
margin: 0 10px;
|
||||
color: #0051ff;
|
||||
font-size: 20px;
|
||||
}
|
||||
.stat-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 12px;
|
||||
margin-right: 15px;
|
||||
background: linear-gradient(to right, #1a56db, #0d47a1);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: #1a56db;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
|
||||
81
src/views/areavisual/region/add-or-updata.vue
Normal file
81
src/views/areavisual/region/add-or-updata.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2021-11-18 14:16:25
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2025-11-28 14:38:31
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-form
|
||||
:model="dataForm"
|
||||
:rules="dataRule"
|
||||
ref="dataForm"
|
||||
@keyup.enter.native="dataFormSubmit()"
|
||||
label-width="80px">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物料编码" prop="materialCode">
|
||||
<el-input
|
||||
v-model="dataForm.materialCode"
|
||||
clearable
|
||||
placeholder="请输入物料编码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物料型号" prop="materialName">
|
||||
<el-input
|
||||
v-model="dataForm.materialName"
|
||||
clearable
|
||||
placeholder="请输入物料型号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="物料规格" prop="material">
|
||||
<el-input
|
||||
v-model="dataForm.material"
|
||||
clearable
|
||||
placeholder="请输入物料规格" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicAdd from '@/mixins/basic-add';
|
||||
import { createProduct, updateProduct,getProduct } from '@/api/ssdl/product&recipe';
|
||||
|
||||
export default {
|
||||
mixins: [basicAdd],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
createURL: createProduct,
|
||||
updateURL: updateProduct,
|
||||
infoURL: getProduct,
|
||||
},
|
||||
dataForm: {
|
||||
id: undefined,
|
||||
material: undefined,
|
||||
materialName: undefined,
|
||||
materialCode: undefined,
|
||||
},
|
||||
typeArr: [],
|
||||
dataRule: {
|
||||
materialCode: [
|
||||
{ required: true, message: '物料编码不能为空', trigger: 'blur' },
|
||||
],
|
||||
materialName: [
|
||||
{ required: true, message: '物料型号不能为空', trigger: 'blur' },
|
||||
],
|
||||
material: [
|
||||
{ required: true, message: '规格不能为空', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
62
src/views/areavisual/region/changeStatus.vue
Normal file
62
src/views/areavisual/region/changeStatus.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<!--
|
||||
* @Author: zwq
|
||||
* @Date: 2025-10-11 14:41:12
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2026-01-14 14:13:14
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
<el-switch
|
||||
@change="changeStatus"
|
||||
size="small"
|
||||
v-model="injectData.regionState"
|
||||
:active-value="1"
|
||||
:inactive-value="2"></el-switch>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateRegion } from '@/api/areavisual/region';
|
||||
export default {
|
||||
props: {
|
||||
injectData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
changeStatus(val) {
|
||||
const pdata = { ...this.injectData, regionState: val };
|
||||
this.$confirm(
|
||||
`是否确认修改${'区域 [ ' + this.injectData.regionName + ' ] '}的状态?`,
|
||||
'更新状态',
|
||||
{
|
||||
confirmButtonText: '确认修改',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
)
|
||||
.then(() => {
|
||||
updateRegion(pdata).then((res) => {
|
||||
if (res.code === 0 || res.code === 200) {
|
||||
this.$modal.msgSuccess('修改成功');
|
||||
this.$emit('emitData');
|
||||
} else {
|
||||
this.$modal.msg(res.msg);
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((res) => {
|
||||
this.$emit('emitData');
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消',
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
221
src/views/areavisual/region/index.vue
Normal file
221
src/views/areavisual/region/index.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
v-loading="dataListLoading"
|
||||
:table-props="tableProps"
|
||||
:page="listQuery.pageNo"
|
||||
:limit="listQuery.pageSize"
|
||||
:table-data="tableData"
|
||||
@emitFun="getDataList">
|
||||
</base-table>
|
||||
<pagination
|
||||
:limit.sync="listQuery.pageSize"
|
||||
:page.sync="listQuery.pageNo"
|
||||
:total="listQuery.total"
|
||||
@pagination="getDataList" />
|
||||
<base-dialog
|
||||
:dialogTitle="addOrEditTitle"
|
||||
:dialogVisible="addOrUpdateVisible"
|
||||
@cancel="handleCancel"
|
||||
@confirm="handleConfirm"
|
||||
:before-close="handleCancel"
|
||||
width="50%">
|
||||
<add-or-update
|
||||
ref="addOrUpdate"
|
||||
@refreshDataList="successSubmit"></add-or-update>
|
||||
</base-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddOrUpdate from './add-or-updata';
|
||||
import basicPage from '@/mixins/basic-page';
|
||||
import { parseTime } from '@/filter/code-filter';
|
||||
import { deleteRegion, getRegionPage } from '@/api/areavisual/region';
|
||||
import changeStatus from './changeStatus.vue';
|
||||
|
||||
const region = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'A区域',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'B区域',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'C区域',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'D区域',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'E区域',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'F区域',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
name: 'G区域',
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
name: 'H区域',
|
||||
},
|
||||
];
|
||||
const regionType = [
|
||||
{
|
||||
id: '1',
|
||||
name: '拉丝缓存区',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: '满盘存储区',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: '空盘存储区',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '复绕区',
|
||||
},
|
||||
];
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'regionCode',
|
||||
label: '区域编码',
|
||||
},
|
||||
{
|
||||
prop: 'regionName',
|
||||
label: '区域名称',
|
||||
},
|
||||
{
|
||||
prop: 'region',
|
||||
label: '区域',
|
||||
filter: (val) => {
|
||||
return region.find((i) => i.id == val)
|
||||
? region.find((i) => i.id == val).name
|
||||
: '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'regionType',
|
||||
label: '区域类型',
|
||||
filter: (val) => {
|
||||
return regionType.find((i) => i.id == val)
|
||||
? regionType.find((i) => i.id == val).name
|
||||
: '-';
|
||||
},
|
||||
},
|
||||
{
|
||||
prop: 'rowNum',
|
||||
label: '行数',
|
||||
width:90,
|
||||
},
|
||||
{
|
||||
prop: 'columnNum',
|
||||
label: '列数',
|
||||
width:90,
|
||||
},
|
||||
{
|
||||
prop: 'regionState',
|
||||
label: '区域状态',
|
||||
width:90,
|
||||
subcomponent: changeStatus,
|
||||
},
|
||||
{
|
||||
prop: 'createTime',
|
||||
label: '创建时间',
|
||||
filter: parseTime,
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
mixins: [basicPage],
|
||||
data() {
|
||||
return {
|
||||
urlOptions: {
|
||||
getDataListURL: getRegionPage,
|
||||
deleteURL: deleteRegion,
|
||||
},
|
||||
tableProps,
|
||||
tableData: [],
|
||||
formConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: '名称',
|
||||
placeholder: '名称',
|
||||
param: 'name',
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: '编码',
|
||||
placeholder: '编码',
|
||||
param: 'code',
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
label: '区域',
|
||||
selectOptions: region,
|
||||
placeholder: '请选择区域',
|
||||
param: 'region',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: '搜索',
|
||||
name: 'search',
|
||||
color: 'primary',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate,
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
buttonClick(val) {
|
||||
switch (val.btnName) {
|
||||
case 'search':
|
||||
this.listQuery.pageNo = 1;
|
||||
this.listQuery.pageSize = 20;
|
||||
this.listQuery.regionName = val.name;
|
||||
this.listQuery.regionCode = val.code;
|
||||
this.listQuery.region = val.region;
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'reset':
|
||||
this.$refs.searchBarForm.resetForm();
|
||||
this.listQuery = {
|
||||
pageSize: 20,
|
||||
pageNo: 1,
|
||||
total: 1,
|
||||
};
|
||||
this.getDataList();
|
||||
break;
|
||||
case 'add':
|
||||
this.addOrEditTitle = '新增';
|
||||
this.addOrUpdateVisible = true;
|
||||
this.addOrUpdateHandle();
|
||||
break;
|
||||
case 'export':
|
||||
this.handleExport();
|
||||
break;
|
||||
default:
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,88 +1,93 @@
|
||||
<template>
|
||||
<div class="errPage-container">
|
||||
<el-button icon="arrow-left" class="pan-back-btn" @click="back">
|
||||
返回
|
||||
</el-button>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h1 class="text-jumbo text-ginormous">
|
||||
401错误!
|
||||
</h1>
|
||||
<h2>您没有访问权限！</h2>
|
||||
<h6>对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="link-type">
|
||||
<router-link to="/">
|
||||
回首页
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img :src="errGif" width="313" height="428" alt="Girl has dropped her ice cream.">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="errPage-container">
|
||||
<el-button icon="arrow-left" class="pan-back-btn" @click="back">
|
||||
返回
|
||||
</el-button>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<h1 class="text-jumbo text-ginormous">401错误!</h1>
|
||||
<h2>您没有访问权限！</h2>
|
||||
<h6>对不起，您没有访问权限，请不要进行非法操作！您可以返回主页面</h6>
|
||||
<ul class="list-unstyled">
|
||||
<li class="link-type">
|
||||
<router-link to="/">回首页</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<img
|
||||
:src="errGif"
|
||||
width="313"
|
||||
height="428"
|
||||
alt="Girl has dropped her ice cream." />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import errGif from '@/assets/401_images/401.gif'
|
||||
import errGif from '@/assets/401_images/401.gif';
|
||||
|
||||
export default {
|
||||
name: 'Page401',
|
||||
data() {
|
||||
return {
|
||||
errGif: errGif + '?' + +new Date()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
if (this.$route.query.noGoBack) {
|
||||
this.$router.push({ path: '/' })
|
||||
} else {
|
||||
this.$router.go(-1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
name: 'Page401',
|
||||
data() {
|
||||
return {
|
||||
errGif: errGif + '?' + +new Date(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
if (this.$route.query.noGoBack) {
|
||||
this.$router.push({
|
||||
path: '/',
|
||||
query: {
|
||||
keyword: 'home',
|
||||
},
|
||||
});
|
||||
} else {
|
||||
this.$router.go(-1);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.errPage-container {
|
||||
width: 800px;
|
||||
max-width: 100%;
|
||||
margin: 100px auto;
|
||||
.pan-back-btn {
|
||||
background: #008489;
|
||||
color: #fff;
|
||||
border: none!important;
|
||||
}
|
||||
.pan-gif {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.pan-img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.text-jumbo {
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
color: #484848;
|
||||
}
|
||||
.list-unstyled {
|
||||
font-size: 14px;
|
||||
li {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
a {
|
||||
color: #008489;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.errPage-container {
|
||||
width: 800px;
|
||||
max-width: 100%;
|
||||
margin: 100px auto;
|
||||
.pan-back-btn {
|
||||
background: #008489;
|
||||
color: #fff;
|
||||
border: none !important;
|
||||
}
|
||||
.pan-gif {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.pan-img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.text-jumbo {
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
color: #484848;
|
||||
}
|
||||
.list-unstyled {
|
||||
font-size: 14px;
|
||||
li {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
a {
|
||||
color: #008489;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -108,7 +108,7 @@
|
||||
</h2>
|
||||
|
||||
<!-- 表单 -->
|
||||
<div class="form-cont" style="margin-top: 60px;">
|
||||
<div class="form-cont" style="margin-top: 60px">
|
||||
<div style="">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
@@ -200,12 +200,14 @@
|
||||
</div>
|
||||
|
||||
<!-- 下方的登录按钮 -->
|
||||
<el-form-item id="button-form-item" style="width: 100%; margin-top: 32px">
|
||||
<el-form-item
|
||||
id="button-form-item"
|
||||
style="width: 100%; margin-top: 32px">
|
||||
<el-button
|
||||
:loading="loading"
|
||||
size="medium"
|
||||
type="primary"
|
||||
style="width: 100%; height: 66px; font-size: 18px;"
|
||||
style="width: 100%; height: 66px; font-size: 18px"
|
||||
@click.native.prevent="getCode">
|
||||
<span v-if="!loading">登 录</span>
|
||||
<span v-else>登 录 中...</span>
|
||||
@@ -409,7 +411,14 @@ export default {
|
||||
this.loginForm
|
||||
)
|
||||
.then(() => {
|
||||
this.$router.push({ path: this.redirect || '/' }).catch(() => {});
|
||||
this.$router
|
||||
.push({
|
||||
path: this.redirect || '/',
|
||||
query: {
|
||||
keyword: 'home',
|
||||
},
|
||||
})
|
||||
.catch(() => {});
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false;
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
|
||||
<script>
|
||||
import {
|
||||
getProductPage,
|
||||
getAllProductPage,
|
||||
createProcess,
|
||||
getProcess,
|
||||
updateProcess,
|
||||
@@ -107,8 +107,8 @@ export default {
|
||||
this.dataForm.processSize = data.processSize || '';
|
||||
this.dataForm.processDesc = data.processDesc || '';
|
||||
this.visible = true;
|
||||
getProductPage({ pageNo: 1, pageSize: 100 }).then((res) => {
|
||||
this.productArr = res.data.list;
|
||||
getAllProductPage().then((res) => {
|
||||
this.productArr = res.data;
|
||||
});
|
||||
// getEquipmentPage({ pageNo: 1, pageSize: 100 }).then((res) => {
|
||||
// this.equipmentArr = res.data.list;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: zwq
|
||||
* @Date: 2023-08-24 14:47:58
|
||||
* @LastEditors: zwq
|
||||
* @LastEditTime: 2025-11-28 10:06:06
|
||||
* @LastEditTime: 2026-01-13 15:56:45
|
||||
* @Description:
|
||||
-->
|
||||
<template>
|
||||
@@ -24,6 +24,10 @@ import { parseTime } from '@/filter/code-filter';
|
||||
import { getProcessDetailPage } from '@/api/ssdl/product&recipe';
|
||||
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'materialCode',
|
||||
label: '物料编号',
|
||||
},
|
||||
{
|
||||
prop: 'materialName',
|
||||
label: '物料型号',
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="title">异常原因Top5</div>
|
||||
<div class="alarm-item" style="margin-top: 14px;">
|
||||
<div class="item top1">
|
||||
<dov class="item-data">
|
||||
<div class="item-data">
|
||||
<div class="data-unit">
|
||||
单位/次
|
||||
</div>
|
||||
@@ -16,10 +16,10 @@
|
||||
261,938,984
|
||||
</div>
|
||||
</div>
|
||||
</dov>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item top2">
|
||||
<dov class="item-data">
|
||||
<div class="item-data">
|
||||
<div class="data-unit">
|
||||
单位/次
|
||||
</div>
|
||||
@@ -31,10 +31,10 @@
|
||||
261,938,984
|
||||
</div>
|
||||
</div>
|
||||
</dov>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item top3">
|
||||
<dov class="item-data">
|
||||
<div class="item-data">
|
||||
<div class="data-unit">
|
||||
单位/次
|
||||
</div>
|
||||
@@ -46,10 +46,10 @@
|
||||
261,938,984
|
||||
</div>
|
||||
</div>
|
||||
</dov>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item top4">
|
||||
<dov class="item-data">
|
||||
<div class="item-data">
|
||||
<div class="data-unit">
|
||||
单位/次
|
||||
</div>
|
||||
@@ -61,10 +61,10 @@
|
||||
261,938,984
|
||||
</div>
|
||||
</div>
|
||||
</dov>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item top5">
|
||||
<dov class="item-data">
|
||||
<div class="item-data">
|
||||
<div class="data-unit">
|
||||
单位/次
|
||||
</div>
|
||||
@@ -76,7 +76,7 @@
|
||||
261,938,984
|
||||
</div>
|
||||
</div>
|
||||
</dov>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1999,7 +1999,7 @@ export default {
|
||||
|
||||
// 根据位置编码（如FK10101L）获取单个位置的状态类名
|
||||
getPositionClass(positionCode) {
|
||||
console.log('positionCode'.positionCode);
|
||||
// console.log('positionCode'.positionCode);
|
||||
|
||||
// 查找完全匹配的lineEdgeLibraryCode
|
||||
const targetData = this.dataList.find(item =>
|
||||
|
||||
@@ -1,61 +1,63 @@
|
||||
<template>
|
||||
<div id="dayReport" class="dayReport" :style="styles">
|
||||
<ReportHeader top-title="车间生产看板" />
|
||||
<div class="main-body" style=" flex: 1; display: flex;padding: 16px 20px 22px 24px;flex-direction: column;">
|
||||
<div class="top" style="display: flex;gap: 16px;">
|
||||
<div class="top-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 367px 1493px;
|
||||
">
|
||||
<agvStatus />
|
||||
<threeDimensionalChart :dataList="dataList" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex;gap: 16px;margin-top: 6px;">
|
||||
<div class="bottom-three" style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 512px 930px 402px;
|
||||
">
|
||||
<div class="left-three" style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 213px 213px;
|
||||
">
|
||||
<taskType />
|
||||
<taskStatus />
|
||||
</div>
|
||||
<div class="center-three" style="
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-template-rows: 330px 92px;
|
||||
">
|
||||
<realTask />
|
||||
<alarm />
|
||||
<div id="dayReport" class="dayReport" :style="styles">
|
||||
<ReportHeader top-title="车间生产看板" />
|
||||
<div
|
||||
class="main-body"
|
||||
style="
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 16px 20px 22px 24px;
|
||||
flex-direction: column;
|
||||
">
|
||||
<div class="top" style="display: flex; gap: 16px">
|
||||
<div
|
||||
class="top-three"
|
||||
style="display: grid; gap: 12px; grid-template-columns: 367px 1493px">
|
||||
<agvStatus />
|
||||
<threeDimensionalChart :dataList="dataList" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="top" style="display: flex; gap: 16px; margin-top: 6px">
|
||||
<div
|
||||
class="bottom-three"
|
||||
style="
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 512px 930px 402px;
|
||||
">
|
||||
<div
|
||||
class="left-three"
|
||||
style="display: grid; gap: 16px; grid-template-rows: 213px 213px">
|
||||
<taskType />
|
||||
<taskStatus />
|
||||
</div>
|
||||
<div
|
||||
class="center-three"
|
||||
style="display: grid; gap: 16px; grid-template-rows: 330px 92px">
|
||||
<realTask />
|
||||
<alarm />
|
||||
|
||||
<!-- <taskStatus /> -->
|
||||
</div>
|
||||
<alarmTop />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <taskStatus /> -->
|
||||
</div>
|
||||
<alarmTop />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ReportHeader from './components/Header.vue'
|
||||
import ReportHeader from './components/Header.vue';
|
||||
// import screenfull from 'screenfull'
|
||||
import agvStatus from './components/agvStatus.vue'
|
||||
import taskType from './components/taskType.vue'
|
||||
import realTask from './components/realTask.vue'
|
||||
import alarm from './components/alarm.vue'
|
||||
import alarmTop from './components/alarmTop.vue'
|
||||
import agvStatus from './components/agvStatus.vue';
|
||||
import taskType from './components/taskType.vue';
|
||||
import realTask from './components/realTask.vue';
|
||||
import alarm from './components/alarm.vue';
|
||||
import alarmTop from './components/alarmTop.vue';
|
||||
|
||||
import taskStatus from './components/taskStatus.vue'
|
||||
|
||||
import threeDimensionalChart from './components/threeDimensionalChart.vue'
|
||||
import { getLineEdgeLibraryList } from '../../../api/visualization/visualization'
|
||||
import taskStatus from './components/taskStatus.vue';
|
||||
|
||||
import threeDimensionalChart from './components/threeDimensionalChart.vue';
|
||||
import { getLineEdgeLibraryList } from '../../../api/visualization/visualization';
|
||||
|
||||
// import financeCosts from './components/financeCosts.vue'
|
||||
// import keyProductionIndicators from './components/keyProductionIndicators.vue'
|
||||
@@ -64,151 +66,164 @@ import { getLineEdgeLibraryList } from '../../../api/visualization/visualization
|
||||
// import keyWork from './components/keyWork.vue'
|
||||
// import moment from 'moment'
|
||||
export default {
|
||||
name: 'DayReport',
|
||||
components: { ReportHeader, agvStatus, threeDimensionalChart, taskType, taskStatus, realTask, alarm, alarmTop },
|
||||
data() {
|
||||
return {
|
||||
// isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dataList:[]
|
||||
}
|
||||
},
|
||||
name: 'DayReport',
|
||||
components: {
|
||||
ReportHeader,
|
||||
agvStatus,
|
||||
threeDimensionalChart,
|
||||
taskType,
|
||||
taskStatus,
|
||||
realTask,
|
||||
alarm,
|
||||
alarmTop,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// isFullScreen: false,
|
||||
timer: null,
|
||||
beilv: 1,
|
||||
value: 100,
|
||||
dataList: [],
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
// this.init()
|
||||
this.windowWidth(document.documentElement.clientWidth)
|
||||
},
|
||||
computed: {
|
||||
// ...mapGetters(['sidebar']),
|
||||
styles() {
|
||||
const v = Math.floor(this.value * this.beilv * 100) / 10000
|
||||
return {
|
||||
transform: `scale(${v})`,
|
||||
transformOrigin: 'left top'
|
||||
// overflow: hidden;
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
clientWidth(val) {
|
||||
if (!this.timer) {
|
||||
this.clientWidth = val
|
||||
this.beilv2 = this.clientWidth / 1920
|
||||
this.timer = true
|
||||
let _this = this
|
||||
setTimeout(function () {
|
||||
_this.timer = false
|
||||
}, 500)
|
||||
}
|
||||
// 这里可以添加修改时的方法
|
||||
this.windowWidth(val);
|
||||
}
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// clearInterval(this.timer)
|
||||
// this.destroy()
|
||||
// },
|
||||
mounted() {
|
||||
const _this = this;
|
||||
_this.beilv = document.documentElement.clientWidth / 1920
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
_this.clientWidth = `${document.documentElement.clientWidth}`
|
||||
this.beilv = _this.clientWidth / 1920
|
||||
})()
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData(data) {
|
||||
console.log(data);
|
||||
getLineEdgeLibraryList().then((res) => {
|
||||
console.log('res', res);
|
||||
created() {
|
||||
// this.init()
|
||||
this.windowWidth(document.documentElement.clientWidth);
|
||||
},
|
||||
computed: {
|
||||
// ...mapGetters(['sidebar']),
|
||||
styles() {
|
||||
const v = Math.floor(this.value * this.beilv * 100) / 10000;
|
||||
return {
|
||||
transform: `scale(${v})`,
|
||||
transformOrigin: 'left top',
|
||||
// overflow: hidden;
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
clientWidth(val) {
|
||||
if (!this.timer) {
|
||||
this.clientWidth = val;
|
||||
this.beilv2 = this.clientWidth / 1920;
|
||||
this.timer = true;
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.timer = false;
|
||||
}, 500);
|
||||
}
|
||||
// 这里可以添加修改时的方法
|
||||
this.windowWidth(val);
|
||||
},
|
||||
},
|
||||
// beforeDestroy() {
|
||||
// clearInterval(this.timer)
|
||||
// this.destroy()
|
||||
// },
|
||||
mounted() {
|
||||
const _this = this;
|
||||
let baseWidth = 1920;
|
||||
if (this.$route.query.keyword == 'home') {
|
||||
baseWidth = 2180;
|
||||
}
|
||||
_this.beilv = document.documentElement.clientWidth / baseWidth;
|
||||
window.onresize = () => {
|
||||
return (() => {
|
||||
_this.clientWidth = `${document.documentElement.clientWidth}`;
|
||||
this.beilv = _this.clientWidth / baseWidth;
|
||||
})();
|
||||
};
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData(data) {
|
||||
console.log(data);
|
||||
getLineEdgeLibraryList().then((res) => {
|
||||
console.log('res', res);
|
||||
|
||||
this.dataList =res.data
|
||||
})
|
||||
},
|
||||
windowWidth(value) {
|
||||
this.clientWidth = value
|
||||
this.beilv2 = this.clientWidth / 1920
|
||||
},
|
||||
// change() {
|
||||
// this.isFullScreen = screenfull.isFullscreen
|
||||
// },
|
||||
// init() {
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.on('change', this.change)
|
||||
// },
|
||||
// destroy() {
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.off('change', this.change)
|
||||
// },
|
||||
// // 全屏
|
||||
// screenfullChange() {
|
||||
// console.log('screenfull.enabled', screenfull.isEnabled);
|
||||
this.dataList = res.data;
|
||||
});
|
||||
},
|
||||
windowWidth(value) {
|
||||
this.clientWidth = value;
|
||||
this.beilv2 = this.clientWidth / 1920;
|
||||
},
|
||||
// change() {
|
||||
// this.isFullScreen = screenfull.isFullscreen
|
||||
// },
|
||||
// init() {
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.on('change', this.change)
|
||||
// },
|
||||
// destroy() {
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.off('change', this.change)
|
||||
// },
|
||||
// // 全屏
|
||||
// screenfullChange() {
|
||||
// console.log('screenfull.enabled', screenfull.isEnabled);
|
||||
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.toggle(this.$refs.dayReportB)
|
||||
// },
|
||||
// changeDate(val) {
|
||||
// this.date = val
|
||||
// // this.weekDay = this.weekArr[moment(this.date).format('e')]
|
||||
// // this.getData()
|
||||
// if (this.date === moment().format('yyyy-MM-DD')) {
|
||||
// this.loopTime()
|
||||
// } else {
|
||||
// clearInterval(this.timer)
|
||||
// }
|
||||
// },
|
||||
// 导出
|
||||
// exportPDF() {
|
||||
// this.$message.success('正在导出，请稍等！')
|
||||
// const element = document.getElementById('dayRepDom')
|
||||
// element.style.display = 'block'
|
||||
// const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
|
||||
// html2canvas(element, {
|
||||
// dpi: 300, // Set to 300 DPI
|
||||
// scale: 3 // Adjusts your resolution
|
||||
// }).then(function(canvas) {
|
||||
// const imgWidth = 595.28
|
||||
// const imgHeight = 841.89
|
||||
// const pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
// const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
|
||||
// PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
|
||||
// setTimeout(() => {
|
||||
// PDF.save(fileName) // 导出文件名
|
||||
// }, 1000)
|
||||
// })
|
||||
// element.style.display = 'none'
|
||||
// }
|
||||
}
|
||||
}
|
||||
// if (!screenfull.isEnabled) {
|
||||
// this.$message({
|
||||
// message: 'you browser can not work',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// return false
|
||||
// }
|
||||
// screenfull.toggle(this.$refs.dayReportB)
|
||||
// },
|
||||
// changeDate(val) {
|
||||
// this.date = val
|
||||
// // this.weekDay = this.weekArr[moment(this.date).format('e')]
|
||||
// // this.getData()
|
||||
// if (this.date === moment().format('yyyy-MM-DD')) {
|
||||
// this.loopTime()
|
||||
// } else {
|
||||
// clearInterval(this.timer)
|
||||
// }
|
||||
// },
|
||||
// 导出
|
||||
// exportPDF() {
|
||||
// this.$message.success('正在导出，请稍等！')
|
||||
// const element = document.getElementById('dayRepDom')
|
||||
// element.style.display = 'block'
|
||||
// const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
|
||||
// html2canvas(element, {
|
||||
// dpi: 300, // Set to 300 DPI
|
||||
// scale: 3 // Adjusts your resolution
|
||||
// }).then(function(canvas) {
|
||||
// const imgWidth = 595.28
|
||||
// const imgHeight = 841.89
|
||||
// const pageData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
// const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
|
||||
// PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
|
||||
// setTimeout(() => {
|
||||
// PDF.save(fileName) // 导出文件名
|
||||
// }, 1000)
|
||||
// })
|
||||
// element.style.display = 'none'
|
||||
// }
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.dayReport {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: #F2F4F9;
|
||||
// background-size: cover;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
background: #f2f4f9;
|
||||
// background-size: cover;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user