9.29代码提交
This commit is contained in:
commit
c3b1d338c1
File diff suppressed because it is too large
Load Diff
|
|
@ -14,9 +14,13 @@
|
|||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.3.14",
|
||||
"less": "^4.2.0",
|
||||
"moment": "^2.30.1",
|
||||
"three": "^0.164.1",
|
||||
"video.js": "^7.21.6",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.5"
|
||||
"vue-router": "^4.2.5",
|
||||
"vue-video-player": "^5.0.2",
|
||||
"vue3-video-play": "^1.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -0,0 +1,21 @@
|
|||
运行代理服务器
|
||||
|
||||
1） 修改\nginx\conf 路径下的 nginx.conf 文件，把 server 节点下的 listen 和 server_name 中
|
||||
的 IP 和端口，直接修改成运行 nginx 所在 PC 或者服务器的网卡的 IP 和端口，之后保存
|
||||
文件。
|
||||
(截图示例中部署 nginx 代理服务器所在的 PC 的 IP 为 10.17.35.14，81 为没有被占用的
|
||||
端口，第三方对接时需要修改成实际环境中的 IP 和端口)。
|
||||
|
||||
2）运行 nginx-1.10.2 里面的 start.bat 开启代理服务器。
|
||||
运行 Demo 页面
|
||||
|
||||
浏览器地址栏输入：http://ip:port/cn/demo.html
|
||||
（这边的 IP 和 PORT 为第一步骤中，nginx.conf 里配置的 IP 和 PORT，示例中使用的是
|
||||
10.17.35.14 和 81，所以地址栏里输入：http://10.17.35.14:81/cn/demo.html）
|
||||
|
||||
页面中，登录设备需要输入海康硬件设备的 IP 地址、端口、用户名和密码，其中端口为设
|
||||
备的 HTTP 端口（默认内网的 80）
|
||||
停止运行代理服务器
|
||||
|
||||
运行 nginx-1.10.2 里面的 stop.bat 可以停止运行代理服务器。
|
||||
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1 @@
|
|||
172.16.1.104:5005
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 665 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 B |
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 74 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
|
|
@ -0,0 +1,24 @@
|
|||
body { overflow: hidden;
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
#unity-container { position: absolute }
|
||||
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
|
||||
#unity-container.unity-mobile { width: 100%; height: 100% }
|
||||
#unity-canvas { background: url('bg1.jpg') no-repeat; }
|
||||
.unity-mobile #unity-canvas { width: 100%; height: 100% }
|
||||
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none ;background: url('bg1.jpg') no-repeat;display: none; }
|
||||
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center ;display: none; }
|
||||
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center;display: none; }
|
||||
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center;display: none; }
|
||||
#unity-footer { position: relative }
|
||||
.unity-mobile #unity-footer { display: none }
|
||||
/* #unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center } */
|
||||
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px ;display: none}
|
||||
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center ;display: none}
|
||||
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
|
||||
#blackleng{
|
||||
width: 100%; height: 100%; background: url('bg1.jpg') no-repeat;
|
||||
}
|
||||
#black{
|
||||
width: 100%; height: 100%; background: url('bg1.jpg') no-repeat;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,139 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Unity WebGL Player | U3D_TobaccoWarehouseISMDTSystem</title>
|
||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="unity-container" class="unity-desktop" style="width: 100%;height: 100%;">
|
||||
<canvas id="unity-canvas" style="width: 100%;height: 100%;"tabindex="-1"></canvas>
|
||||
<div id="unity-loading-bar">
|
||||
<div id="unity-logo"></div>
|
||||
<div id="unity-progress-bar-empty">
|
||||
<div id="unity-progress-bar-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="unity-warning"> </div>
|
||||
<!-- <div id="unity-footer">
|
||||
<div id="unity-webgl-logo"></div>
|
||||
<div id="unity-fullscreen-button"></div>
|
||||
<div id="unity-build-title">U3D_TobaccoWarehouseISMDTSystem</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<script>
|
||||
|
||||
var container = document.querySelector("#unity-container");
|
||||
var canvas = document.querySelector("#unity-canvas");
|
||||
var loadingBar = document.querySelector("#unity-loading-bar");
|
||||
var progressBarFull = document.querySelector("#unity-progress-bar-full");
|
||||
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
|
||||
var warningBanner = document.querySelector("#unity-warning");
|
||||
var unity
|
||||
// Shows a temporary message banner/ribbon for a few seconds, or
|
||||
// a permanent error message on top of the canvas if type=='error'.
|
||||
// If type=='warning', a yellow highlight color is used.
|
||||
// Modify or remove this function to customize the visually presented
|
||||
// way that non-critical warnings and error messages are presented to the
|
||||
// user.
|
||||
function unityShowBanner(msg, type) {
|
||||
function updateBannerVisibility() {
|
||||
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||||
}
|
||||
var div = document.createElement('div');
|
||||
div.innerHTML = msg;
|
||||
warningBanner.appendChild(div);
|
||||
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
||||
else {
|
||||
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||||
setTimeout(function() {
|
||||
warningBanner.removeChild(div);
|
||||
updateBannerVisibility();
|
||||
}, 5000);
|
||||
}
|
||||
updateBannerVisibility();
|
||||
}
|
||||
|
||||
var buildUrl = "Build";
|
||||
var loaderUrl = buildUrl + "/Hoister.loader.js";
|
||||
var config = {
|
||||
dataUrl: buildUrl + "/Hoister.data.unityweb",
|
||||
frameworkUrl: buildUrl + "/Hoister.framework.js.unityweb",
|
||||
codeUrl: buildUrl + "/Hoister.wasm.unityweb",
|
||||
streamingAssetsUrl: "StreamingAssets",
|
||||
companyName: "DefaultCompany",
|
||||
productName: "U3D_TobaccoWarehouseISMDTSystem",
|
||||
productVersion: "0.1",
|
||||
showBanner: unityShowBanner,
|
||||
};
|
||||
|
||||
// By default, Unity keeps WebGL canvas render target size matched with
|
||||
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
|
||||
// Set this to false if you want to decouple this synchronization from
|
||||
// happening inside the engine, and you would instead like to size up
|
||||
// the canvas DOM size and WebGL render target sizes yourself.
|
||||
// config.matchWebGLToCanvasSize = false;
|
||||
|
||||
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
|
||||
// Mobile device style: fill the whole browser client area with the game canvas:
|
||||
|
||||
var meta = document.createElement('meta');
|
||||
meta.name = 'viewport';
|
||||
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
|
||||
document.getElementsByTagName('head')[0].appendChild(meta);
|
||||
container.className = "unity-mobile";
|
||||
canvas.className = "unity-mobile";
|
||||
|
||||
// To lower canvas resolution on mobile devices to gain some
|
||||
// performance, uncomment the following line:
|
||||
// config.devicePixelRatio = 1;
|
||||
|
||||
|
||||
} else {
|
||||
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||
|
||||
canvas.style.width = "100%";
|
||||
canvas.style.height = "100%";
|
||||
}
|
||||
|
||||
// loadingBar.style.display = "block";
|
||||
|
||||
var script = document.createElement("script");
|
||||
script.src = loaderUrl;
|
||||
script.onload = () => {
|
||||
createUnityInstance(canvas, config, (progress) => {
|
||||
// progressBarFull.style.width = 100 * progress + "%";
|
||||
// window.parent.getProgress(progress);
|
||||
}).then((unityInstance) => {
|
||||
unity = unityInstance
|
||||
// loadingBar.style.display = "none";
|
||||
// fullscreenButton.onclick = () => {
|
||||
// unityInstance.SetFullscreen(1);
|
||||
// };
|
||||
}).catch((message) => {
|
||||
alert(message);
|
||||
});
|
||||
};
|
||||
//切换模型
|
||||
function changeModel(data){
|
||||
unity.SendMessage('Controller','Displaymodel',data)
|
||||
}
|
||||
function open(){
|
||||
unity.SendMessage('提升机','Unfold')
|
||||
}
|
||||
function close(){
|
||||
unity.SendMessage('提升机','Restore')
|
||||
}
|
||||
function opencar(){
|
||||
unity.SendMessage('AGV','Unfold')
|
||||
}
|
||||
function closecar(){
|
||||
unity.SendMessage('AGV','Restore')
|
||||
}
|
||||
document.body.appendChild(script);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<configuration>
|
||||
<system.webServer>
|
||||
<staticContent>
|
||||
<mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />
|
||||
</staticContent>
|
||||
</system.webServer>
|
||||
</configuration>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -64,7 +64,7 @@ export function allDevicId(params){
|
|||
// 易损件
|
||||
export function getPageDamageEquip(params){
|
||||
return request({
|
||||
url:'/api/equipManage/GetPageDamageEquip',
|
||||
url:'/api/equipManage/GetDamageElement',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
|
|
@ -102,7 +102,7 @@ export function countYearErrors(params){
|
|||
}
|
||||
|
||||
|
||||
// 维护保养统计
|
||||
// 维修统计
|
||||
export function countMaintainRecord(params){
|
||||
return request({
|
||||
url:'/api/maintainManage/CountMaintainRecord',
|
||||
|
|
@ -151,4 +151,41 @@ export function getErrorRate(params){
|
|||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
//运维指导
|
||||
|
||||
//指导文件下拉数据
|
||||
export function getDocsIdentity(params){
|
||||
return request({
|
||||
url:'/api/guide/GetDocsIdentity',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
//指导文件
|
||||
export function GetPageGuideDocs(params){
|
||||
return request({
|
||||
url:'/api/guide/GetPageGuideDocs',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
//知识库
|
||||
//获取知识库下拉数据
|
||||
export function GetVideosIdentity(params){
|
||||
return request({
|
||||
url:'/api/guide/GetVideosIdentity',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
//获取知识库列表数据
|
||||
export function GetPageGuideVideos(params){
|
||||
return request({
|
||||
url:'/api/guide/GetPageGuideVideos',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -55,4 +55,40 @@ export function getLocInfo(params){
|
|||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 库存消息
|
||||
export function getInventoryMessage(params){
|
||||
return request({
|
||||
url:'/api/inventory/GetInventoryMessage',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 即时库存信息情况
|
||||
export function getStoreMsg(params){
|
||||
return request({
|
||||
url:'/api/inventory/GetInventoryInfo',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 空箱 实箱 批次数据获取
|
||||
export function getBrandBox(params){
|
||||
return request({
|
||||
url:'/api/location/GetLocInfo',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 获取各品牌库存情况表格数据接口
|
||||
export function getBrandTable(params){
|
||||
return request({
|
||||
url:'/api/location/GetConLocData',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import request from '@/utils/request'
|
||||
// 设备基础信息页面
|
||||
export function downloadPdf(url){
|
||||
return request({
|
||||
url:url,
|
||||
method:'get',
|
||||
responseType: 'blob',
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
|
||||
import request from '@/utils/request'
|
||||
// 入库信息
|
||||
// 获取各品牌的占比
|
||||
export function getBrandPercent(params){
|
||||
return request({
|
||||
url:'/api/inOrder/GetBrandPercent',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 获取仓库细节
|
||||
export function getRepoDetails(params){
|
||||
return request({
|
||||
url:'/api/inOrder/GetRepoDetails',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 获取所有的品牌名称
|
||||
export function getBrandNames(params){
|
||||
return request({
|
||||
url:'/api/inOrder/GetBrandNames',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 获取某品牌某年某月的情况
|
||||
export function getBrandTimeCount(params){
|
||||
return request({
|
||||
url:'/api/inOrder/GetBrandTimeCount',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 出库信息
|
||||
// 获取各品牌的占比
|
||||
export function getOutBrandPercent(params){
|
||||
return request({
|
||||
url:'/api/outOrder/GetBrandPercent',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 获取仓库细节
|
||||
export function getOutRepoDetails(params){
|
||||
return request({
|
||||
url:'/api/outOrder/GetRepoDetails',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 获取所有的品牌名称
|
||||
export function getOutBrandNames(params){
|
||||
return request({
|
||||
url:'/api/outOrder/GetBrandNames',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 获取某品牌某年某月的情况
|
||||
export function getOutBrandTimeCount(params){
|
||||
return request({
|
||||
url:'/api/outOrder/GetBrandTimeCount',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 装箱站入库统计
|
||||
export function getWeightBetweenTime(params){
|
||||
return request({
|
||||
url:'/api/inOrder/GetWeightBetweenTime',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 676 B After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
|
|
@ -65,7 +65,7 @@ function initChart() {
|
|||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: getPath.fontBg, // 图片地址
|
||||
image: props.dataMap.name?getPath.fontBg:'', // 图片地址
|
||||
width: 52,
|
||||
height: 24,
|
||||
},
|
||||
|
|
@ -80,26 +80,26 @@ function initChart() {
|
|||
top: "69%",
|
||||
style: {
|
||||
fill: "#fff",
|
||||
text: `${props.dataMap.name}`,
|
||||
fontSize: `14`,
|
||||
text: `${props.dataMap.name?props.dataMap.name:''}`,
|
||||
fontSize: `0.8rem`,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
z: 100,
|
||||
left: "center",
|
||||
top: props.dataMap.kg?"81%":"84%",
|
||||
top: '78%',
|
||||
style: {
|
||||
fill: "#fff",
|
||||
text: `${props.dataMap.type}`,
|
||||
fontSize: `12`,
|
||||
text: `${props.dataMap.type?props.dataMap.type:''}`,
|
||||
fontSize: `0.9rem`,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
z: 100,
|
||||
left: "center",
|
||||
top: "91%",
|
||||
top: "85%",
|
||||
style: {
|
||||
fill: "rgba(255, 206, 84, 1)",
|
||||
text: `${props.dataMap.kg?props.dataMap.kg:''}`,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="box">
|
||||
<div class="box-header">
|
||||
<div class="box-title">
|
||||
{{ props.title === '维护保养统计'?"维修统计":props.title }}
|
||||
{{ props.title === '维修统计'?"维修统计":props.title }}
|
||||
</div>
|
||||
<div class="el-select1">
|
||||
<el-select
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
</el-select>
|
||||
</div>
|
||||
<div class="el-select2">
|
||||
<el-select v-if="props.title === '维护保养统计'"
|
||||
<el-select v-if="props.title === '维修统计'"
|
||||
v-model="isMaintain"
|
||||
placeholder="请选择"
|
||||
@change="
|
||||
|
|
@ -83,10 +83,10 @@
|
|||
<el-table-column prop="remark" label="备注" align="center" />
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 维护保养统计 -->
|
||||
<!-- 维修统计 -->
|
||||
<div
|
||||
class="box-content-table"
|
||||
v-else-if="props.title === '维护保养统计'"
|
||||
v-else-if="props.title === '维修统计'"
|
||||
>
|
||||
<el-table :data="tableList" style="width: 100%">
|
||||
<el-table-column
|
||||
|
|
@ -170,14 +170,14 @@ function getTableList() {
|
|||
if (props.title === "备件更换统计") {
|
||||
getPageSparePart(params).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
total.value = res.result.total;
|
||||
total.value = res.result.totalNum;
|
||||
});
|
||||
} else if (props.title === "故障分析") {
|
||||
getPageFaultAnalysisInfo(params).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
total.value = res.result.total;
|
||||
total.value = res.result.totalNum;
|
||||
});
|
||||
} else if (props.title === "维护保养统计") {
|
||||
} else if (props.title === "维修统计") {
|
||||
params.isMaintain = isMaintain.value;
|
||||
getPageMaintainInfo(params).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ const tableList = ref([]);
|
|||
const deviceListParams = reactive({
|
||||
name: "",
|
||||
code: "",
|
||||
size:8,
|
||||
size:10,
|
||||
index:1
|
||||
});
|
||||
const total = ref(0)
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
</div>
|
||||
<!-- table -->
|
||||
<div class="box-content-left-table">
|
||||
<el-table :data="tableList" style="width: 100%">
|
||||
<el-table :data="tableList" style="width: 100%" @row-click="OperationData" :row-class-name="getCellClassName">
|
||||
<el-table-column prop="facCode" label="设备编号" />
|
||||
<el-table-column prop="deviceName" label="设备名称" />
|
||||
</el-table>
|
||||
|
|
@ -70,6 +70,15 @@
|
|||
<div class="box-content-right-top">
|
||||
<div class="box-content-right-title">
|
||||
<span>运行情况统计</span>
|
||||
<div style="display: flex; margin-left:50%">
|
||||
<el-date-picker
|
||||
v-model="value3"
|
||||
type="year"
|
||||
placeholder="请选择年份"
|
||||
@change="OperationData"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 折线图 -->
|
||||
<div class="lineChart" id="lineChart"></div>
|
||||
|
|
@ -85,7 +94,7 @@
|
|||
:key="index"
|
||||
>
|
||||
<p>
|
||||
<span>{{item.equipment.facName }} {{item.equipment.facCode}}</span>
|
||||
<span>{{item.elementName }} {{item.elementCode}}</span>
|
||||
<span>{{ item.damageRatio*100 }}%</span>
|
||||
</p>
|
||||
<div class="switch-item-progress" :style="'width:' + item.damageRatio*100 + '%'"></div>
|
||||
|
|
@ -119,12 +128,25 @@ import {
|
|||
getEquipCode
|
||||
} from "@/api/equipmentManagement/index";
|
||||
const emit = defineEmits(["closeEquipmentAnalysis"]);
|
||||
const value3 = ref(new Date());
|
||||
function openDialog(event, val) {
|
||||
if (val !== undefined) {
|
||||
dialogTitle.value =
|
||||
event.target.parentNode.previousElementSibling.innerText;
|
||||
maintenanceDialogShow.value = true;
|
||||
} else {
|
||||
dialogTitle.value = event.target.previousElementSibling.innerText;
|
||||
maintenanceDialogShow.value = true;
|
||||
}
|
||||
// console.log(event.target.previousElementSibling.innerText);
|
||||
}
|
||||
const options = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: 1,
|
||||
},
|
||||
]);
|
||||
const activeRow= ref(null)
|
||||
const tableList = ref([
|
||||
{
|
||||
id: "SFTR-003DB013",
|
||||
|
|
@ -174,7 +196,9 @@ function drawLineChart(data) {
|
|||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
let option = {
|
||||
tooltip: {},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
top: "8%",
|
||||
left: "1%",
|
||||
|
|
@ -225,7 +249,7 @@ function drawLineChart(data) {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: "异常流量",
|
||||
name: "运行情况",
|
||||
type: "line",
|
||||
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
|
|
@ -301,14 +325,16 @@ function close() {
|
|||
const deviceListParams = reactive({
|
||||
deviceName: "",
|
||||
deviceCode: "",
|
||||
size:8,
|
||||
size:10,
|
||||
index:1
|
||||
});
|
||||
const total = ref(0)
|
||||
function getDeviceList() {
|
||||
getPageEquipList(deviceListParams).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
OperationData(tableList.value[0]);
|
||||
total.value = res.result.totalNum
|
||||
|
||||
});
|
||||
}
|
||||
// 所有设备名称
|
||||
|
|
@ -320,6 +346,12 @@ function getAllDeviceNames() {
|
|||
allName.value = res.result;
|
||||
});
|
||||
}
|
||||
function getCellClassName({ row, rowIndex }) {
|
||||
if (currentRowId.value == row.id) {
|
||||
return "highlight-row";
|
||||
}
|
||||
return "";
|
||||
}
|
||||
// 所有设备id
|
||||
const deviceIds = ref([]);
|
||||
function deviceNameChange() {
|
||||
|
|
@ -336,32 +368,65 @@ function clearHandle() {
|
|||
deviceListParams.deviceCode = "";
|
||||
deviceIds.value = "";
|
||||
}
|
||||
// 初始id
|
||||
const currentRowId = ref(null);
|
||||
|
||||
const equipmentCode = ref('Car1')
|
||||
// 获取运行情况数据请求
|
||||
function OperationData() {
|
||||
countYearErrors().then((res) => {
|
||||
function OperationData(row) {
|
||||
console.log(row,"row")
|
||||
currentRowId.value = row.id;
|
||||
console.log(" equipmentCode.value", equipmentCode.value)
|
||||
let params={}
|
||||
if(row.facCode){
|
||||
equipmentCode.value = row.facCode
|
||||
params = {
|
||||
year: value3.value.getFullYear(),
|
||||
equipmentCode: row.facCode,
|
||||
};
|
||||
getPageDamageEquipList()
|
||||
}else{
|
||||
params = {
|
||||
year: value3.value.getFullYear(),
|
||||
equipmentCode: equipmentCode.value,
|
||||
};
|
||||
}
|
||||
|
||||
activeRow.value = row;
|
||||
countYearErrors(params).then((res) => {
|
||||
drawLineChart(res.result.slice(1));
|
||||
});
|
||||
}
|
||||
|
||||
const params = {
|
||||
facName:'',
|
||||
const params1 = {
|
||||
equipmentCode:'',
|
||||
pageIndex:1,
|
||||
pageSize:4
|
||||
}
|
||||
// 获取易损件数据
|
||||
function getPageDamageEquipList(){
|
||||
getPageDamageEquip(params).then(res=>{
|
||||
switchList.value = res.result.data
|
||||
params1.equipmentCode = equipmentCode.value
|
||||
getPageDamageEquip(params1).then(res=>{
|
||||
switchList.value = res.result
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
getAllDeviceNames();
|
||||
getDeviceList();
|
||||
OperationData();
|
||||
getPageDamageEquipList()
|
||||
|
||||
// getPageDamageEquipList()
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.active-row {
|
||||
background-color: #6ebd43;
|
||||
/* 其他你想要的样式 */
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
:deep(.highlight-row) {
|
||||
background-color:rgba(174, 211, 255, 0.2) !important;
|
||||
}
|
||||
.box {
|
||||
width: vw(1380);
|
||||
height: vh(716);
|
||||
|
|
@ -418,6 +483,7 @@ onMounted(() => {
|
|||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/deviceInfo-title1.png");
|
||||
|
||||
span {
|
||||
font-size: 1.375rem;
|
||||
font-family: "pangmen";
|
||||
|
|
@ -437,6 +503,7 @@ onMounted(() => {
|
|||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/deviceInfo-title2.png") !important;
|
||||
display: flex;
|
||||
span {
|
||||
font-size: 1.375rem;
|
||||
font-family: "pangmen";
|
||||
|
|
@ -557,4 +624,5 @@ onMounted(() => {
|
|||
:deep(.el-pagination__total){
|
||||
left: vw(40) !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
v-model="value2"
|
||||
type="year"
|
||||
placeholder="请选择年份"
|
||||
@change="sparePartsInterface"
|
||||
/>
|
||||
<span
|
||||
style="margin-left: 1.25rem"
|
||||
|
|
@ -59,7 +60,7 @@
|
|||
</div>
|
||||
<div class="box-content-box4">
|
||||
<div class="title">
|
||||
<span>维护保养统计</span>
|
||||
<span>维修统计</span>
|
||||
<span class="more" @click="openDialog"></span>
|
||||
</div>
|
||||
<div class="maintenance">
|
||||
|
|
@ -139,17 +140,17 @@ function drawHealthIndex(list) {
|
|||
"rgba(174, 211, 255, 0.7)",
|
||||
];
|
||||
let result = []
|
||||
let total = 0
|
||||
for (let key in list) {
|
||||
if (key !== "错误总数") {
|
||||
result.push({
|
||||
name: key,
|
||||
value: list[key],
|
||||
});
|
||||
}else{
|
||||
total = list[key]
|
||||
}
|
||||
}
|
||||
let total = list.totalCount;
|
||||
for (var i = 0; i < list.columnDatas.length; i++) {
|
||||
// if (key != "totalCount") {
|
||||
result.push({
|
||||
name: list.columnDatas[i].name,
|
||||
value: list.columnDatas[i].number,
|
||||
});
|
||||
// } else {
|
||||
// total = list[key];
|
||||
// }
|
||||
}
|
||||
let dom = document.querySelector("#healthIndex");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
|
|
@ -190,7 +191,8 @@ function drawHealthIndex(list) {
|
|||
padding: [8, 10], //内边距
|
||||
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
||||
formatter: function (params) {
|
||||
return params.name + ': ' + total*params.value
|
||||
// return params.name + ': ' + total*params.value
|
||||
return params.name + ': ' + params.value
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
|
|
@ -289,7 +291,7 @@ function drawHealthIndex(list) {
|
|||
if (el.name === "往复式提升机") {
|
||||
return {
|
||||
value: el.value,
|
||||
name: "往复式提升机",
|
||||
name: el.name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(28, 238, 251, 0.62)",
|
||||
|
|
@ -299,7 +301,7 @@ function drawHealthIndex(list) {
|
|||
} else {
|
||||
return {
|
||||
value: el.value,
|
||||
name: "智能双向穿梭车",
|
||||
name:el.name,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(4, 132, 189, 0.62)",
|
||||
|
|
@ -325,17 +327,17 @@ function drawSpareParts(list) {
|
|||
"rgba(174, 211, 255, 0.7)",
|
||||
];
|
||||
let result = []
|
||||
let total = 0
|
||||
for (let key in list) {
|
||||
if (key !== "总数") {
|
||||
result.push({
|
||||
name: key,
|
||||
value: list[key],
|
||||
});
|
||||
}else{
|
||||
total = list[key]
|
||||
}
|
||||
}
|
||||
let total = list.totalCount;
|
||||
for (var i = 0; i < list.columnDatas.length; i++) {
|
||||
// if (key != "totalCount") {
|
||||
result.push({
|
||||
name: list.columnDatas[i].name,
|
||||
value: list.columnDatas[i].number,
|
||||
});
|
||||
// } else {
|
||||
// total = list[key];
|
||||
// }
|
||||
}
|
||||
let dom = document.querySelector("#spareParts");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
|
|
@ -377,7 +379,8 @@ function drawSpareParts(list) {
|
|||
padding: [8, 10], //内边距
|
||||
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
||||
formatter: function (params) {
|
||||
return params.name + ': ' + total*params.value
|
||||
// return params.name + ': ' + total*params.value
|
||||
return params.name + ': ' + params.value
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
|
|
@ -498,7 +501,7 @@ function drawFault(data) {
|
|||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
let option = {
|
||||
tooltip: {},
|
||||
tooltip: {trigger: 'axis'},
|
||||
grid: {
|
||||
top: "8%",
|
||||
left: "1%",
|
||||
|
|
@ -549,7 +552,7 @@ function drawFault(data) {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: "异常流量",
|
||||
name: "故障",
|
||||
type: "line",
|
||||
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
|
|
@ -616,7 +619,7 @@ function getHealthIndex() {
|
|||
}
|
||||
|
||||
const maintenanceList = ref([]);
|
||||
// 维护保养统计接口
|
||||
// 维修统计接口
|
||||
function maintenanceInterface() {
|
||||
countMaintainRecord().then((res) => {
|
||||
for (let key in res.result) {
|
||||
|
|
@ -630,6 +633,7 @@ function faultAnalysisInterface() {
|
|||
year: value3.value.getFullYear(),
|
||||
};
|
||||
countYearErrors(params).then((res) => {
|
||||
console.log("res.result",res.result)
|
||||
drawFault(res.result.slice(1));
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -134,16 +134,16 @@ function drawLeftChart(list) {
|
|||
"rgba(174, 211, 255, 0.7)",
|
||||
];
|
||||
let result = [];
|
||||
let total = 0;
|
||||
for (let key in list) {
|
||||
if (key != "总数") {
|
||||
let total = list.totalCount;
|
||||
for (var i = 0; i < list.columnDatas.length; i++) {
|
||||
// if (key != "totalCount") {
|
||||
result.push({
|
||||
name: key,
|
||||
value: list[key],
|
||||
name: list.columnDatas[i].name,
|
||||
value: list.columnDatas[i].number,
|
||||
});
|
||||
} else {
|
||||
total = list[key];
|
||||
}
|
||||
// } else {
|
||||
// total = list[key];
|
||||
// }
|
||||
}
|
||||
let dom = document.querySelector("#pieChart1");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
|
|
@ -183,7 +183,8 @@ function drawLeftChart(list) {
|
|||
padding: [8, 10], //内边距
|
||||
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
||||
formatter: function (params) {
|
||||
return params.name + ': ' + total*params.value
|
||||
// return params.name + ': ' + total*params.value
|
||||
return params.name + ': ' + params.value
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
|
|
@ -303,16 +304,16 @@ function drawRightChart(list) {
|
|||
"rgba(174, 211, 255, 0.7)",
|
||||
];
|
||||
let result = [];
|
||||
let total = 0
|
||||
for (let key in list) {
|
||||
if (key != "总数") {
|
||||
let total = list.totalCount;
|
||||
for (var i = 0; i < list.columnDatas.length; i++) {
|
||||
// if (key != "totalCount") {
|
||||
result.push({
|
||||
name: key,
|
||||
value: list[key],
|
||||
name: list.columnDatas[i].name,
|
||||
value: list.columnDatas[i].number,
|
||||
});
|
||||
}else{
|
||||
total = list[key]
|
||||
}
|
||||
// } else {
|
||||
// total = list[key];
|
||||
// }
|
||||
}
|
||||
let dom = document.querySelector("#pieChart2");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
|
|
@ -351,7 +352,8 @@ function drawRightChart(list) {
|
|||
padding: [8, 10], //内边距
|
||||
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
||||
formatter: function (params) {
|
||||
return params.name + ': ' + total*params.value
|
||||
// return params.name + ': ' + total*params.value
|
||||
return params.name + ': ' + params.value
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
|
|
@ -495,7 +497,7 @@ function completedMaintenancePlan() {
|
|||
|
||||
const planParams = reactive({
|
||||
pageIndex: 1,
|
||||
pageSize: 3,
|
||||
pageSize: 5,
|
||||
facName: "",
|
||||
});
|
||||
const total = ref(0);
|
||||
|
|
|
|||
|
|
@ -12,17 +12,23 @@
|
|||
<li
|
||||
v-for="(item, index) in deviceList"
|
||||
:key="index"
|
||||
@click="toggleHandle(index)"
|
||||
@click="toggleHandle(index,item)"
|
||||
:class="liIndex === index ? 'device-select' : ''"
|
||||
>
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="box-content-middle">
|
||||
<div class="unity">
|
||||
<iframe src="Hoister/index.html" frameborder="0" id="unityModule"></iframe>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="box-content-msg">
|
||||
<div class="box-content-top">
|
||||
<div class="btn1"></div>
|
||||
<div class="btn2"></div>
|
||||
<div @click="openmodel" :class="openShow === true ? 'btn1' : 'btn11'"></div>
|
||||
<div @click="closemodel" :class="closeShow === true ? 'btn22' : 'btn2'"></div>
|
||||
</div>
|
||||
<div class="box-content-bottom">
|
||||
<div class="name">
|
||||
|
|
@ -30,7 +36,7 @@
|
|||
设备名称:
|
||||
</span>
|
||||
<span>
|
||||
穿梭车
|
||||
{{ changeName }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,18 +47,49 @@
|
|||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const deviceList = ref(["穿梭车", "TW4", "TW3", "快换电池"]);
|
||||
// const deviceList = ref(["穿梭车", "TW4", "TW3", "快换电池"]);
|
||||
const deviceList = ref(["穿梭车", "提升机"])
|
||||
const liIndex = ref(0);
|
||||
|
||||
const openShow= ref(false);
|
||||
const closeShow= ref(false);
|
||||
const emit = defineEmits(['closeExplosion'])
|
||||
|
||||
function toggleHandle(index) {
|
||||
const changeName = ref("穿梭车");
|
||||
function toggleHandle(index,item) {
|
||||
openShow.value = false
|
||||
closeShow.value = false
|
||||
changeName.value = item
|
||||
liIndex.value = index;
|
||||
if(item==="穿梭车"){
|
||||
document.getElementById("unityModule").contentWindow.changeModel('小车');
|
||||
}else{
|
||||
document.getElementById("unityModule").contentWindow.changeModel('提升机');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function close(){
|
||||
emit('closeExplosion',-1)
|
||||
}
|
||||
function openmodel(){
|
||||
openShow.value = true
|
||||
closeShow.value = false
|
||||
if(changeName.value==="穿梭车"){
|
||||
document.getElementById("unityModule").contentWindow.opencar();
|
||||
}else if(changeName.value==="提升机"){
|
||||
document.getElementById("unityModule").contentWindow.open();
|
||||
}
|
||||
|
||||
}
|
||||
function closemodel(){
|
||||
openShow.value = false
|
||||
closeShow.value = true
|
||||
if(changeName.value==="穿梭车"){
|
||||
document.getElementById("unityModule").contentWindow.closecar();
|
||||
}else if(changeName.value==="提升机"){
|
||||
document.getElementById("unityModule").contentWindow.close();
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
|
|
@ -105,6 +142,20 @@ function close(){
|
|||
}
|
||||
}
|
||||
}
|
||||
&-middle{
|
||||
width: vw(660);
|
||||
margin-left: vw(-100);
|
||||
// border: 1px solid greenyellow;
|
||||
.unity {
|
||||
width: 115%;
|
||||
height: 94%;
|
||||
// position: fixed;
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-msg{
|
||||
width: vw(340);
|
||||
}
|
||||
|
|
@ -112,7 +163,7 @@ function close(){
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: vh(16);
|
||||
.btn1,.btn2{
|
||||
.btn1,.btn2,.btn11,.btn22{
|
||||
width: vw(160);
|
||||
height: vh(44);
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -121,9 +172,15 @@ function close(){
|
|||
.btn1{
|
||||
background-image: url('@/assets/images/dialog/explosion-btn1-select.png');
|
||||
}
|
||||
.btn11{
|
||||
background-image: url('@/assets/images/dialog/explosion-btn11-select.png');
|
||||
}
|
||||
.btn2{
|
||||
background-image: url('@/assets/images/dialog/explosion-btn2-default.png');
|
||||
}
|
||||
.btn22{
|
||||
background-image: url('@/assets/images/dialog/explosion-btn22-default.png');
|
||||
}
|
||||
}
|
||||
&-bottom{
|
||||
width: vw(340);
|
||||
|
|
|
|||
|
|
@ -7,64 +7,118 @@
|
|||
<div class="box-btn" @click="close"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="box-content-left-title">
|
||||
<span>文件列表</span>
|
||||
<!-- 选择框 -->
|
||||
|
||||
<el-select
|
||||
@clear="clearHandle"
|
||||
@change="GetPageGuideDocsData(params1.code)"
|
||||
clearable
|
||||
v-model="params1.code"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in allName"
|
||||
:key="item.showName"
|
||||
:label="item.showName"
|
||||
:value="item.realCode"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li v-for="(item, index) in fileList" :key="'file' + index">
|
||||
<span>
|
||||
{{ item.name }}
|
||||
{{ item.fileName }}
|
||||
</span>
|
||||
<span>
|
||||
<span class="preview">预览</span>
|
||||
<span class="download">下载</span>
|
||||
<!-- <span class="preview">预览</span>
|
||||
<span class="download">下载</span> -->
|
||||
<el-button type="text" class="preview" @click="previewFile(item)"
|
||||
>预览</el-button
|
||||
>
|
||||
<el-button type="text" class="download" @click="download(item)"
|
||||
>下载</el-button
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div style="float: right">
|
||||
<el-pagination
|
||||
v-model:current-page="params1.pageIndex"
|
||||
:page-size="params1.pageSize"
|
||||
:size="params1.pageSize"
|
||||
:pager-count='5'
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@current-change="GetPageGuideDocsData"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import {
|
||||
getDocsIdentity,
|
||||
GetPageGuideDocs,
|
||||
|
||||
} from "@/api/equipmentManagement/index";
|
||||
import {downloadPdf} from "@/api/operation/index"
|
||||
import { onMounted } from "vue";
|
||||
const emit = defineEmits(["closeGuidance"]);
|
||||
const fileList = ref([
|
||||
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
{
|
||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
||||
},
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
{
|
||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
||||
},
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
{
|
||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
||||
},
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
{
|
||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
||||
},
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
{
|
||||
name: "ABRC01型快换电池及电池充电系统使用说明书",
|
||||
},
|
||||
{
|
||||
name: "CN12升降输送机说明书",
|
||||
},
|
||||
]);
|
||||
const allName = ref([]);
|
||||
const fileList = ref([]);
|
||||
//获取指导文件下拉数据
|
||||
function getDocsIdentityData() {
|
||||
getDocsIdentity().then((res) => {
|
||||
allName.value = res.result;
|
||||
});
|
||||
}
|
||||
const equipmentCode = ref("");
|
||||
const params1 = {
|
||||
code: "",
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
|
||||
//下载
|
||||
async function download(item) {
|
||||
const response = await downloadPdf(item.filePath);
|
||||
const url = window.URL.createObjectURL(new Blob([response]));
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.setAttribute("download", "file.pdf");
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
}
|
||||
function previewFile(item) {
|
||||
window.open(import.meta.env.VITE_APP_BASE_API + item.filePath);
|
||||
}
|
||||
|
||||
|
||||
|
||||
const total = ref(0)
|
||||
// 获取指导文件数据
|
||||
function GetPageGuideDocsData(item) {
|
||||
GetPageGuideDocs(params1).then((res) => {
|
||||
total.value = res.result.totalNum
|
||||
fileList.value = res.result.data;
|
||||
});
|
||||
}
|
||||
function close() {
|
||||
emit("closeGuidance", -1);
|
||||
}
|
||||
onMounted(() => {
|
||||
getDocsIdentityData();
|
||||
GetPageGuideDocsData();
|
||||
// getPageDamageEquipList()
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
|
|
@ -118,14 +172,61 @@ function close() {
|
|||
// border-radius: 8px; /* 滑块的圆角 */
|
||||
}
|
||||
&-content {
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
// overflow: scroll;
|
||||
// overflow-x: hidden;
|
||||
height: vh(636 - 60);
|
||||
width: vw(1088);
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
&-left {
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border: 1px solid;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(144, 218, 255, 0.5),
|
||||
rgba(144, 218, 255, 0.1000000015)
|
||||
)
|
||||
1 1;
|
||||
&-title {
|
||||
width: 100%;
|
||||
height: vh(36);
|
||||
padding-left: vw(32);
|
||||
line-height: vh(36);
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/deviceInfo-title2.png");
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: vh(12);
|
||||
span {
|
||||
font-size: 1.375rem;
|
||||
font-family: "pangmen";
|
||||
}
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
width: vw(480);
|
||||
&-select {
|
||||
margin: vh(12) 0;
|
||||
justify-content: space-between;
|
||||
display: inline-block;
|
||||
}
|
||||
&-table {
|
||||
height: vh(440);
|
||||
}
|
||||
}
|
||||
ul::-webkit-scrollbar{
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
|
||||
height: vh(460);
|
||||
overflow-y: scroll;
|
||||
li {
|
||||
padding: 0 vw(40);
|
||||
display: block;
|
||||
|
|
@ -149,4 +250,8 @@ function close() {
|
|||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-input) {
|
||||
width: vw(160);
|
||||
height: vh(28);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,45 +8,156 @@
|
|||
<div class="box-content">
|
||||
<div class="box-content-left">
|
||||
<div class="box-content-select">
|
||||
<el-select v-model="value" clearable placeholder="请选择设备">
|
||||
<!-- <el-select v-model="value" clearable placeholder="请选择设备">
|
||||
<el-option>11</el-option>
|
||||
</el-select> -->
|
||||
<el-select
|
||||
@clear="clearHandle"
|
||||
@change="getPageGuideVideosData(params1.code)"
|
||||
clearable
|
||||
v-model="params1.code"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in allName"
|
||||
:key="item.showName"
|
||||
:label="item.showName"
|
||||
:value="item.realCode"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="box-content-table">
|
||||
<el-table
|
||||
:row-class-name="getRowClassName"
|
||||
:row-class-name="getRowClassName"
|
||||
:data="tableList"
|
||||
style="width: 100%"
|
||||
@row-click="rowClick"
|
||||
>
|
||||
<el-table-column prop="code" label="序号" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="deviceCode" label="序号" />
|
||||
<el-table-column prop="deviceName" label="名称" />
|
||||
</el-table>
|
||||
</div>
|
||||
<div style="float: right">
|
||||
<el-pagination
|
||||
v-model:current-page="params1.pageIndex"
|
||||
:page-size="params1.pageSize"
|
||||
:size="params1.pageSize"
|
||||
:pager-count='5'
|
||||
layout="total, prev, pager, next"
|
||||
:total="total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@current-change="getPageGuideVideosData"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-right">
|
||||
<div class="bg"></div>
|
||||
<div class="bg">
|
||||
<videoPlay
|
||||
width="100%"
|
||||
height="100%"
|
||||
title="视频播放"
|
||||
:src="options.src"
|
||||
:poster="options.poster"
|
||||
@play="onPlay"
|
||||
@pause="onPause"
|
||||
@timeupdate="onTimeupdate"
|
||||
@canplay="onCanplay"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const value = ref('')
|
||||
import { ref, reactive } from "vue";
|
||||
import {
|
||||
GetVideosIdentity,
|
||||
GetPageGuideVideos,
|
||||
} from "@/api/equipmentManagement/index";
|
||||
import { videoPlay } from "vue3-video-play/lib/index";
|
||||
import "vue3-video-play/dist/style.css";
|
||||
import { onMounted } from "vue";
|
||||
const value = ref("");
|
||||
const emit = defineEmits(["closeKnowledgeBase"]);
|
||||
function close() {
|
||||
emit("closeKnowledgeBase", -1);
|
||||
}
|
||||
const VideoPlayer1 = ref();
|
||||
const tableList = ref([]);
|
||||
// const videoUrl = ref("")
|
||||
const options = reactive({
|
||||
width: document.documentElement.clientWidth,
|
||||
autoplay: true,
|
||||
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
|
||||
src: "", //视频源
|
||||
poster:
|
||||
"https://pics0.baidu.com/feed/d833c895d143ad4b28bdb4ea587008a1a50f068e.jpeg?token=ecd7d8fd2fd5c08092bfd91627691f7d", //封面
|
||||
});
|
||||
const onPlay = (ev) => {
|
||||
console.log("播放");
|
||||
};
|
||||
const onPause = (ev) => {
|
||||
console.log(ev, "暂停");
|
||||
};
|
||||
|
||||
const tableList = ref([
|
||||
{
|
||||
name:'智能双向穿梭车',
|
||||
code:1
|
||||
}
|
||||
])
|
||||
const onTimeupdate = (ev) => {
|
||||
// console.log(ev, "时间更新");
|
||||
};
|
||||
const onCanplay = (ev) => {
|
||||
// console.log(ev, "可以播放");
|
||||
};
|
||||
|
||||
const allName = ref([]);
|
||||
//获取知识库下拉数据
|
||||
function getVideosIdentityData() {
|
||||
GetVideosIdentity().then((res) => {
|
||||
allName.value = res.result;
|
||||
});
|
||||
}
|
||||
const tableRowIndex = ref(0);
|
||||
const getRowClassName = ({ row, rowIndex }) => {
|
||||
row.index = rowIndex;
|
||||
if (tableRowIndex.value == rowIndex) {
|
||||
return "highlight-row";
|
||||
}
|
||||
return "";
|
||||
};
|
||||
function rowClick(row) {
|
||||
tableRowIndex.value = row.index;
|
||||
options.src = import.meta.env.VITE_APP_BASE_API + tableList.value[row.index].videoPath
|
||||
console.log(options.src);
|
||||
}
|
||||
const equipmentCode = ref("");
|
||||
const params1 = {
|
||||
code: "",
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
};
|
||||
// total 总数
|
||||
const total = ref(0)
|
||||
// 获取知识库数据
|
||||
function getPageGuideVideosData(item) {
|
||||
GetPageGuideVideos(params1).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
total.value = res.result.totalNum
|
||||
options.src = import.meta.env.VITE_APP_BASE_API + tableList.value[0].videoPath
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
getVideosIdentityData();
|
||||
getPageGuideVideosData();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-pagination__total){
|
||||
left: vw(40) !important;
|
||||
}
|
||||
:deep(.highlight-row) {
|
||||
background-color: rgba(174, 211, 255, 0.2) !important;
|
||||
}
|
||||
.box {
|
||||
width: vw(1380);
|
||||
height: vh(716);
|
||||
|
|
@ -84,8 +195,11 @@ const tableList = ref([
|
|||
justify-content: space-between;
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
&-select{
|
||||
margin-bottom: vh(16);
|
||||
&-table{
|
||||
height: vh(500);
|
||||
}
|
||||
&-select {
|
||||
margin-bottom: vh(16);
|
||||
}
|
||||
&-left {
|
||||
width: vw(340);
|
||||
|
|
@ -93,7 +207,7 @@ const tableList = ref([
|
|||
background-image: url("@/assets/images/dialog/knowledgeBase-left.png");
|
||||
padding: vh(20) vw(20);
|
||||
box-sizing: border-box;
|
||||
:deep(.el-input){
|
||||
:deep(.el-input) {
|
||||
width: vw(300);
|
||||
height: vh(36);
|
||||
}
|
||||
|
|
@ -103,11 +217,18 @@ const tableList = ref([
|
|||
height: vh(616);
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/knowledgeBase-right.png");
|
||||
.video-js.vjs-fluid,
|
||||
.video-js.vjs-16-9,
|
||||
.video-js.vjs-4-3 {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("@/assets/images/dialog/knowledgeBase-img.png");
|
||||
background-size: 100% 100%;
|
||||
// background-image: url("@/assets/images/dialog/knowledgeBase-img.png");
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,18 @@
|
|||
<div class="box-content">
|
||||
<div class="box-content-title">
|
||||
<span> {{ props.title }} </span>
|
||||
<div>
|
||||
<span style="font-size: 0.875rem; margin-right: 0.8rem"
|
||||
>时间筛选</span
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
type="daterange"
|
||||
@change="getCountData"
|
||||
start-placeholder="请选择开始时间"
|
||||
end-placeholder="请选择结束时间"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div class="box-content-plate1">
|
||||
|
|
@ -30,7 +42,6 @@
|
|||
</div>
|
||||
<div class="box-content-plate2">
|
||||
<div id="chart1"></div>
|
||||
<div id="chart2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,8 +49,10 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps, onMounted ,nextTick} from "vue";
|
||||
import { ref, defineProps, onMounted, nextTick, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import moment from "moment";
|
||||
import { getWeightBetweenTime } from "@/api/productionInformation";
|
||||
const emit = defineEmits(["closeMachine"]);
|
||||
const deviceList = ref([
|
||||
{
|
||||
|
|
@ -48,20 +61,34 @@ const deviceList = ref([
|
|||
total: "222699.28",
|
||||
avgPro: "27897.41",
|
||||
},
|
||||
{
|
||||
name: "2号翻箱机",
|
||||
total: "222699.28",
|
||||
avgPro: "27897.41",
|
||||
id: 2,
|
||||
},
|
||||
// {
|
||||
// name: "2号翻箱机",
|
||||
// total: "222699.28",
|
||||
// avgPro: "27897.41",
|
||||
// id: 2,
|
||||
// },
|
||||
]);
|
||||
// 时间区间
|
||||
const date = ref([
|
||||
moment().subtract(1, "days").format("YYYY-MM-DD"),
|
||||
moment().format("YYYY-MM-DD"),
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
});
|
||||
function close() {
|
||||
emit("closeMachine", -1);
|
||||
}
|
||||
function drawChart1() {
|
||||
|
||||
// 头部的轮播图
|
||||
function drawChart1(res) {
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
for (let key in res) {
|
||||
xData.push(key.split(" ")[0]);
|
||||
yData.push(res[key]);
|
||||
}
|
||||
let dom = document.querySelector("#chart1");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
|
|
@ -70,13 +97,29 @@ function drawChart1() {
|
|||
tooltip: {},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "1%",
|
||||
right: "1%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
// type: "slider", // 设置为滑动条型式
|
||||
// show: true, // 显示dataZoom组件
|
||||
// start: 0, // 默认显示的起始位置为0
|
||||
// end: 49, // 默认显示的结束位置为100
|
||||
// handleSize: 8, // 滑动条的手柄大小
|
||||
// handleStyle: {
|
||||
// color: "#DCE2E8", // 滑动条的手柄颜色
|
||||
// },
|
||||
// xAxisIndex: [0], // 表示控制第一个x轴
|
||||
// filterMode: "filter", // 设置为filter模式，即数据超过范围时会被过滤掉
|
||||
// },
|
||||
// ],
|
||||
|
||||
xAxis: [
|
||||
{
|
||||
interval: 0,
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
|
|
@ -87,26 +130,29 @@ function drawChart1() {
|
|||
},
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
// align:'left',
|
||||
// rotate:180,
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:'0.875rem',
|
||||
fontSize: "0.875rem",
|
||||
// margin: 15,
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
data: ['2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03'],
|
||||
data: xData,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name:'单位:kg',
|
||||
nameTextStyle:{
|
||||
color:'#fff',
|
||||
fontSize:'0.875rem',
|
||||
name: "单位:kg",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
splitNumber: 5,
|
||||
// splitNumber: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
|
@ -117,7 +163,7 @@ function drawChart1() {
|
|||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:'0.875rem',
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
|
|
@ -156,7 +202,7 @@ function drawChart1() {
|
|||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
},
|
||||
data: [5, 6, 7, 8, 9, 7, 5, 4, 2, 7, 8, 4],
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -168,6 +214,7 @@ function drawChart1() {
|
|||
myChart.resize();
|
||||
});
|
||||
}
|
||||
// 底部的折线图
|
||||
function drawChart2() {
|
||||
let dom = document.querySelector("#chart2");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
|
|
@ -197,20 +244,29 @@ function drawChart2() {
|
|||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:'0.875rem',
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
data: ['2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03', '2023-03-03'],
|
||||
data: [
|
||||
"2023-03-03",
|
||||
"2023-03-03",
|
||||
"2023-03-03",
|
||||
"2023-03-03",
|
||||
"2023-03-03",
|
||||
"2023-03-03",
|
||||
"2023-03-03",
|
||||
"2023-03-03",
|
||||
],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name:'单位:kg',
|
||||
nameTextStyle:{
|
||||
color:'#fff',
|
||||
fontSize:'0.875rem',
|
||||
name: "单位:kg",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
|
|
@ -223,7 +279,7 @@ function drawChart2() {
|
|||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize:'0.875rem',
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
|
|
@ -274,9 +330,42 @@ function drawChart2() {
|
|||
myChart.resize();
|
||||
});
|
||||
}
|
||||
// 筛选的时间参数
|
||||
const params = reactive({
|
||||
startTimeYear: "",
|
||||
startTimeMonth: "",
|
||||
startTimeDay: "",
|
||||
endTimeYear: "",
|
||||
endTimeMonth: "",
|
||||
endTimeDay: "",
|
||||
});
|
||||
|
||||
// const
|
||||
// 获取统计数据
|
||||
function getCountData(val) {
|
||||
if (val) {
|
||||
date.value[0] = moment(date.value[0]).format("YYYY-MM-DD");
|
||||
date.value[1] = moment(date.value[1]).format("YYYY-MM-DD");
|
||||
}
|
||||
|
||||
let startList = date.value[0].split("-");
|
||||
let endList = date.value[1].split("-");
|
||||
params.startTimeYear = startList[0];
|
||||
params.startTimeMonth = startList[1];
|
||||
params.startTimeDay = startList[2];
|
||||
params.endTimeYear = endList[0];
|
||||
params.endTimeMonth = endList[1];
|
||||
params.endTimeDay = endList[2];
|
||||
getWeightBetweenTime(params).then((res) => {
|
||||
deviceList.value[0].total = res.result.totalNum;
|
||||
deviceList.value[0].avgPro = res.result.percentNum;
|
||||
drawChart1(res.result.dictionary);
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
drawChart1()
|
||||
drawChart2()
|
||||
getCountData();
|
||||
// drawChart1();
|
||||
// drawChart2();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -323,10 +412,12 @@ onMounted(() => {
|
|||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/inoutbound.png");
|
||||
span {
|
||||
font-size: 1.375rem;
|
||||
font-family: "pangmen";
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-title > span {
|
||||
font-size: 1.375rem;
|
||||
font-family: "pangmen";
|
||||
}
|
||||
&-plate1 {
|
||||
float: left;
|
||||
|
|
@ -338,8 +429,10 @@ onMounted(() => {
|
|||
padding-top: vh(20);
|
||||
box-sizing: border-box;
|
||||
&-name {
|
||||
// width: vw(48);
|
||||
// height: vh(230);
|
||||
width: vw(48);
|
||||
height: vh(230);
|
||||
height: vh(480);
|
||||
background-image: url("@/assets/images/dialog/chassis.png");
|
||||
background-size: 100% 100%;
|
||||
writing-mode: vertical-rl; /* 文字从上到下，从右到左 */
|
||||
|
|
@ -359,8 +452,10 @@ onMounted(() => {
|
|||
}
|
||||
section {
|
||||
text-align: center;
|
||||
// width: vw(160);
|
||||
// height: vh(104);
|
||||
width: vw(160);
|
||||
height: vh(104);
|
||||
height: vh(229);
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/dialog/pro-bg.png");
|
||||
span {
|
||||
|
|
@ -369,16 +464,17 @@ onMounted(() => {
|
|||
span:nth-child(1) {
|
||||
font-size: 0.875rem;
|
||||
// margin-top: vh(16);
|
||||
line-height: vh(31);
|
||||
line-height: vh(38);
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 1.375rem;
|
||||
margin-top: vh(9);
|
||||
margin-top: vh(68);
|
||||
color: rgba(234, 255, 254, 1);
|
||||
// line-height: vh(32);
|
||||
}
|
||||
span:nth-child(3) {
|
||||
font-size: 0.8rem;
|
||||
margin-top: vh(26);
|
||||
color: rgba(113, 133, 149, 1);
|
||||
// line-height: vh(32);
|
||||
}
|
||||
|
|
@ -391,9 +487,24 @@ onMounted(() => {
|
|||
#chart2 {
|
||||
margin-top: vh(20);
|
||||
width: vw(800);
|
||||
height: vh(228);
|
||||
// height: vh(228);
|
||||
height: vh(456);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-date-editor) {
|
||||
width: vw(350) !important;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(
|
||||
180deg,
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 1),
|
||||
rgba(25.000000409781933, 174.00000482797623, 250.00000029802322, 0.7)
|
||||
)
|
||||
1 1;
|
||||
height: vh(28);
|
||||
}
|
||||
:deep(.el-range-input) {
|
||||
color: #fff !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,21 +9,24 @@
|
|||
<div class="box-content-chart">
|
||||
<div class="pre" @click="prvePage"></div>
|
||||
<div class="swiper">
|
||||
<div
|
||||
class="swiper-box"
|
||||
:style="`transform:translateX(${transform})`"
|
||||
<transition
|
||||
:name="btnName"
|
||||
v-for="(item, index) in Math.ceil(chartList.length / 8)"
|
||||
:key="item.id"
|
||||
>
|
||||
<div
|
||||
class="box-content-chart-item"
|
||||
v-for="item in chartList"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="chart">
|
||||
<pieChart :dataMap="item" />
|
||||
<div v-if="index == chartIndex" style="display: flex">
|
||||
<div
|
||||
class="box-content-chart-item"
|
||||
v-for="item in chartList.slice(index * 8, 8 * (index + 1))"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="chart">
|
||||
<pieChart :dataMap="item" />
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div class="next" @click="nextPage"></div>
|
||||
|
|
@ -32,28 +35,52 @@
|
|||
<div class="box-content-inBound-title">
|
||||
<span> 入库信息统计 </span>
|
||||
<div>
|
||||
<ul>
|
||||
<ul v-if="storeList">
|
||||
<li><span>单位：</span><span>kg</span></li>
|
||||
<li><span>总量：</span><span>3047457</span></li>
|
||||
<li><span>品牌总量：</span><span>1632057</span></li>
|
||||
<li><span>批次数量：</span><span>176</span></li>
|
||||
<li>
|
||||
<span>总量：</span><span>{{ storeList.totalWeight }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>品牌总量：</span><span>{{ storeList.brandNum }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>批次数量：</span><span>{{ storeList.batchNum }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<section class="one">
|
||||
<el-date-picker
|
||||
class="picker"
|
||||
v-model="value2"
|
||||
v-model="params.year"
|
||||
type="year"
|
||||
placeholder="请选择年份"
|
||||
@change="maintenancePlan"
|
||||
@change="
|
||||
getAllBrandName(true);
|
||||
"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<el-date-picker
|
||||
v-model="value2"
|
||||
type="year"
|
||||
placeholder="请选择年份"
|
||||
@change="maintenancePlan"
|
||||
/>
|
||||
<!-- <el-date-picker
|
||||
v-model="params.month"
|
||||
type="month"
|
||||
placeholder="请选择月份"
|
||||
@change="
|
||||
getAllBrandName();
|
||||
"
|
||||
/> -->
|
||||
<el-select
|
||||
v-model="params.month"
|
||||
class="m-2"
|
||||
placeholder="请选择月份"
|
||||
clearable
|
||||
@change="getAllBrandName()"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item,index) in options"
|
||||
:key="'key' + index"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,16 +109,28 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import {
|
||||
getBrandPercent,
|
||||
getRepoDetails,
|
||||
getBrandNames,
|
||||
getBrandTimeCount,
|
||||
getOutBrandPercent,
|
||||
getOutRepoDetails,
|
||||
getOutBrandNames,
|
||||
getOutBrandTimeCount,
|
||||
} from "@/api/productionInformation/index";
|
||||
import pieChart from "@/components/echarts/pie";
|
||||
import { ref, defineProps, onMounted } from "vue";
|
||||
import { ref, defineProps, onMounted, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
});
|
||||
|
||||
const options = ref(['1','2','3','4','5','6','7','8','9','10','11','12'])
|
||||
const activeNames = ref(["1"]);
|
||||
const emit = defineEmits(["closeBoundMsg"]);
|
||||
const index = ref(0);
|
||||
const transform = ref(0);
|
||||
const chartIndex = ref(0);
|
||||
const btnName = ref("left");
|
||||
const chartList = ref([
|
||||
{
|
||||
id: 11,
|
||||
|
|
@ -141,6 +180,7 @@ const chartList = ref([
|
|||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
|
||||
{
|
||||
id: 19,
|
||||
name: "利群",
|
||||
|
|
@ -154,18 +194,100 @@ const chartList = ref([
|
|||
value: 20,
|
||||
},
|
||||
]);
|
||||
// 获取占比图列表
|
||||
function getChartList() {
|
||||
if (props.title === "入库信息") {
|
||||
getBrandPercent().then((res) => {
|
||||
chartList.value = res.result.columnDatas.map((ele) => {
|
||||
return {
|
||||
type: ele.name,
|
||||
value: ele.percentage * 100,
|
||||
};
|
||||
});
|
||||
});
|
||||
} else {
|
||||
getOutBrandPercent().then((res) => {
|
||||
chartList.value = res.result.columnDatas.map((ele) => {
|
||||
return {
|
||||
type: ele.name,
|
||||
value: ele.percentage * 100,
|
||||
};
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const storeList = ref(null);
|
||||
// 获取仓库细节
|
||||
function getStoreDetail() {
|
||||
if (props.title === "入库信息") {
|
||||
getRepoDetails().then((res) => {
|
||||
storeList.value = res.result;
|
||||
});
|
||||
} else {
|
||||
getOutRepoDetails().then((res) => {
|
||||
storeList.value = res.result;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 参数
|
||||
const params = reactive({
|
||||
year: new Date(),
|
||||
month: "",
|
||||
brandName: "",
|
||||
});
|
||||
// 获取所有的品牌名称
|
||||
function getAllBrandName(boolean) {
|
||||
if (boolean) {
|
||||
params.year = params.year.getFullYear().toString();
|
||||
} else{
|
||||
console.log(params.month.slice(0,-2));
|
||||
// params.month = params.month.slice(-2)
|
||||
}
|
||||
if (props.title === "入库信息") {
|
||||
getBrandNames(params).then((res) => {
|
||||
brandList.value = res.result;
|
||||
params.brandName = brandList.value[0];
|
||||
getBrandChart();
|
||||
});
|
||||
} else {
|
||||
getOutBrandNames(params).then((res) => {
|
||||
brandList.value = res.result;
|
||||
params.brandName = brandList.value[0];
|
||||
getBrandChart();
|
||||
});
|
||||
}
|
||||
}
|
||||
// 根据品牌名称获取chart图
|
||||
function getBrandChart() {
|
||||
if (props.title === "入库信息") {
|
||||
getBrandTimeCount(params).then((res) => {
|
||||
drawBarChart(res.result);
|
||||
});
|
||||
} else {
|
||||
getOutBrandTimeCount(params).then((res) => {
|
||||
drawBarChart(res.result);
|
||||
});
|
||||
}
|
||||
}
|
||||
// 下一页
|
||||
function nextPage() {
|
||||
if (index.value === parseInt((chartList.value.length + 1) / 8)) return;
|
||||
index.value++;
|
||||
transform.value = -1 * index.value * 100 + "%";
|
||||
btnName.value = "right";
|
||||
if (chartIndex.value == Math.ceil(chartList.value.length / 8) - 1) {
|
||||
chartIndex.value = 0;
|
||||
} else {
|
||||
chartIndex.value++;
|
||||
}
|
||||
}
|
||||
// 上一页
|
||||
function prvePage() {
|
||||
if (index.value === 0) return;
|
||||
index.value--;
|
||||
|
||||
transform.value = 1 * index.value * 100 + "%";
|
||||
btnName.value = "left";
|
||||
if (chartIndex.value == 0) {
|
||||
chartIndex.value = Math.ceil(chartList.value.length / 8) - 1;
|
||||
} else {
|
||||
chartIndex.value--;
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
|
|
@ -183,28 +305,22 @@ const brandList = ref([
|
|||
"利群(长嘴)烟丝",
|
||||
"兰州(硬吉祥)烟丝",
|
||||
]);
|
||||
function drawBarChart() {
|
||||
function drawBarChart(res) {
|
||||
let dom = document.querySelector("#barChart");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
let option = {
|
||||
grid:{
|
||||
left:'5%',
|
||||
bottom:'8%',
|
||||
right:'2%',
|
||||
top:'15%'
|
||||
grid: {
|
||||
left: "5%",
|
||||
bottom: "8%",
|
||||
right: "2%",
|
||||
top: "15%",
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
1,
|
||||
2,
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
6,
|
||||
7,
|
||||
],
|
||||
data: res.map((ele, index) => {
|
||||
return index + 1;
|
||||
}),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgba(56, 72, 89, 1)",
|
||||
|
|
@ -219,8 +335,8 @@ function drawBarChart() {
|
|||
name: "单位:kg",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: '1rem',
|
||||
padding:[0,35,10,0]
|
||||
fontSize: "1rem",
|
||||
padding: [0, 35, 10, 0],
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
|
|
@ -229,16 +345,15 @@ function drawBarChart() {
|
|||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: '0.875rem',
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type:'dashed',
|
||||
type: "dashed",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
|
@ -247,8 +362,8 @@ function drawBarChart() {
|
|||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(28, 238, 251, 1)',
|
||||
borderWidth: 1,
|
||||
borderColor: "rgba(28, 238, 251, 1)",
|
||||
borderWidth: 1,
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
|
|
@ -268,7 +383,9 @@ function drawBarChart() {
|
|||
),
|
||||
},
|
||||
},
|
||||
data: [254, 3254, 1654, 2454, 4757, 2011, 1211],
|
||||
data: res.map((ele, index) => {
|
||||
return ele;
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -277,17 +394,21 @@ function drawBarChart() {
|
|||
myChart.resize();
|
||||
});
|
||||
}
|
||||
onMounted(()=>{
|
||||
drawBarChart()
|
||||
|
||||
})
|
||||
onMounted(() => {
|
||||
getChartList();
|
||||
getStoreDetail();
|
||||
// 获取所有品牌的种类
|
||||
getAllBrandName(true);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.swiper {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
transition: all linear 0.2s;
|
||||
&-box {
|
||||
display: flex;
|
||||
// transition: all linear .2s;
|
||||
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
|
@ -357,12 +478,15 @@ onMounted(()=>{
|
|||
rgba(144.00000661611557, 218.00000220537186, 255, 0.10000000149011612)
|
||||
)
|
||||
1 1;
|
||||
.swiper-box {
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
&-item {
|
||||
margin-right: vw(52);
|
||||
// width: vw(100);
|
||||
// height: vh(170);
|
||||
.chart {
|
||||
width: vw(100);
|
||||
width: vw(110);
|
||||
height: vh(170);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,4 +5,7 @@ import ElementPlus from 'element-plus'
|
|||
import 'element-plus/dist/index.css'
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
||||
import router from "./router/router.js"
|
||||
|
||||
|
||||
|
||||
createApp(App).use(ElementPlus,{locale:zhCn}).use(router).mount('#app')
|
||||
|
|
|
|||
|
|
@ -25,4 +25,37 @@ body {
|
|||
width: vw(52);
|
||||
height: vh(24);
|
||||
}
|
||||
|
||||
.left-enter-from {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
.right-enter-from{
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.left-enter-active,
|
||||
.left-leave-active,
|
||||
.right-enter-active,
|
||||
.right-leave-active{
|
||||
transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
|
||||
}
|
||||
|
||||
.left-enter-to,.right-enter-to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.left-leave-from,.right-leave-from{
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.left-leave-to {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
.right-leave-to {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ const service = axios.create({
|
|||
baseURL: import.meta.env.VITE_APP_BASE_API, // api的base_url
|
||||
timeout: 5000 // 请求超时时间
|
||||
});
|
||||
console.log(import.meta.env.VITE_APP_BASE_API,'xxxx');
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use(
|
||||
config => {
|
||||
|
|
|
|||
|
|
@ -25,13 +25,14 @@
|
|||
<inOutboundMsg :title="title" v-if="listIndex===0||listIndex===1" @closeBoundMsg="closeSecondDialog"/>
|
||||
<!-- 出入库批次耗时 -->
|
||||
<!-- <inOutBoundBacth :title="title" v-if="listIndex===2 || listIndex===3" @closeBatch='closeSecondDialog'/> -->
|
||||
<!-- 库存消息 -->
|
||||
<inventoryNews v-if="listIndex===2" @close='closeSecondDialog' />
|
||||
<!-- 各品牌库存情况 -->
|
||||
<brand v-if="listIndex===2" @closeBrand='closeSecondDialog' />
|
||||
|
||||
<!-- 喂丝机 装箱机弹窗 -->
|
||||
<inOutMachine :title="title" v-if="listIndex===3 || listIndex===4" @closeMachine="closeSecondDialog" />
|
||||
</template>
|
||||
<script setup>
|
||||
import inventoryNews from '@/views/home/components/homeDialog/inventoryNews'
|
||||
import brand from '@/views/home/components/homeDialog/brand'
|
||||
import inOutboundMsg from '@/components/productionInformation/inOutboundMsg'
|
||||
import inOutBoundBacth from '@/components/productionInformation/inOutBoundBacth'
|
||||
import inOutMachine from '@/components/productionInformation/inOutMachine'
|
||||
|
|
@ -66,7 +67,7 @@ const list = ref([
|
|||
{
|
||||
default: getPath.dev5,
|
||||
select: getPath.dev5Select,
|
||||
title:'库存信息'
|
||||
title:'各品牌库存情况'
|
||||
},
|
||||
{
|
||||
default: getPath.dev6,
|
||||
|
|
|
|||
|
|
@ -28,24 +28,38 @@
|
|||
<div class="box-content-search">
|
||||
<div>
|
||||
<el-input
|
||||
v-model="searchData"
|
||||
v-model="tableParams.name"
|
||||
@change="getTableList"
|
||||
class="w-50 m-2"
|
||||
placeholder="请输入搜索内容"
|
||||
:prefix-icon="Search"
|
||||
/>
|
||||
<el-select
|
||||
style="margin-left:1rem"
|
||||
v-model="tableParams.orderByLoc"
|
||||
class="m-2"
|
||||
placeholder="是否排序"
|
||||
@change="getTableList()"
|
||||
>
|
||||
<el-option label="是" :value="true" />
|
||||
<el-option label="否" :value="false" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<span>A区空箱：</span><span>{{ areaNum.AareaNo }}</span>
|
||||
<span>货位：</span><span>{{ areaNum.storeNum }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>A区实箱：</span><span>{{ areaNum.AareaHas }}</span>
|
||||
<span>实箱：</span><span>{{ areaNum.hasBox }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>A区批次数量：</span><span>{{ areaNum.ABatch }}</span>
|
||||
<span>空箱：</span><span>{{ areaNum.noBox }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span>批次数量：</span><span>{{ areaNum.batchNo }}</span>
|
||||
</li>
|
||||
<!-- <li>
|
||||
<span>B区空箱：</span><span>{{ areaNum.BareaNo }}</span>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -53,35 +67,37 @@
|
|||
</li>
|
||||
<li>
|
||||
<span>B区批次数量：</span><span>{{ areaNum.BareaNo }}</span>
|
||||
</li>
|
||||
</li> -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content-table">
|
||||
<el-table :data="tableList" style="width: 100%" @row-click="rowClick">
|
||||
<el-table-column prop="id" label="序号" width="180" />
|
||||
<el-table-column prop="trayNumber" label="托盘号" width="180" />
|
||||
<el-table-column prop="address" label="当前存放位置" />
|
||||
<el-table-column prop="dsc" label="物料描述" />
|
||||
<el-table-column prop="batch" label="批次" />
|
||||
<el-table-column prop="inDate" label="入库时间" />
|
||||
<el-table-column prop="number" label="编号" />
|
||||
<el-table :data="tableList" style="width: 100%">
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
width="50"
|
||||
:index="indexMethod"
|
||||
/>
|
||||
<el-table-column prop="palletNum" label="托盘号" />
|
||||
<el-table-column prop="storeLoc" label="当前存放位置" />
|
||||
<el-table-column prop="itemDesc" label="物料描述" />
|
||||
<el-table-column prop="batchNum" label="批次" />
|
||||
<el-table-column prop="inputTime" label="入库时间" width="200" />
|
||||
<!-- <el-table-column prop="number" label="编号" /> -->
|
||||
<el-table-column prop="upWeight" label="上箱重量" />
|
||||
<el-table-column prop="downWeight" label="下箱重量" />
|
||||
</el-table>
|
||||
<div style="float: right">
|
||||
<el-pagination
|
||||
v-model:current-page="currentPage1"
|
||||
:page-size="100"
|
||||
:size="size"
|
||||
:disabled="disabled"
|
||||
:background="background"
|
||||
v-model:current-page="tableParams.index"
|
||||
:page-size="tableParams.size"
|
||||
:size="tableParams.size"
|
||||
layout="total, prev, pager, next"
|
||||
:total="1000"
|
||||
:total="tableTotal"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
@current-change="getTableList"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
|
@ -91,56 +107,55 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { getBrandBox, getBrandTable, getStoreMsg } from "@/api/home";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
import echart from "@/components/echarts/pie";
|
||||
const emit = defineEmits(['closeBrand'])
|
||||
const emit = defineEmits(["closeBrand"]);
|
||||
const list = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "利群",
|
||||
type: "黑中支",
|
||||
kg: "1148.23kg",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "利群",
|
||||
type: "黑中支",
|
||||
kg: "1148.23kg",
|
||||
value: 40,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "利群",
|
||||
type: "黑中支",
|
||||
kg: "1148.23kg",
|
||||
value: 40,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "利群",
|
||||
type: "黑中支",
|
||||
kg: "1148.23kg",
|
||||
value: 40,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "利群",
|
||||
type: "黑中支",
|
||||
kg: "1148.23kg",
|
||||
value: 40,
|
||||
},
|
||||
// {
|
||||
// id: 1,
|
||||
// name: "利群",
|
||||
// type: "黑中支",
|
||||
// kg: "1148.23kg",
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// name: "利群",
|
||||
// type: "黑中支",
|
||||
// kg: "1148.23kg",
|
||||
// value: 40,
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// name: "利群",
|
||||
// type: "黑中支",
|
||||
// kg: "1148.23kg",
|
||||
// value: 40,
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// name: "利群",
|
||||
// type: "黑中支",
|
||||
// kg: "1148.23kg",
|
||||
// value: 40,
|
||||
// },
|
||||
// {
|
||||
// id: 5,
|
||||
// name: "利群",
|
||||
// type: "黑中支",
|
||||
// kg: "1148.23kg",
|
||||
// value: 40,
|
||||
// },
|
||||
]);
|
||||
|
||||
// 区域数量
|
||||
const areaNum = ref({
|
||||
AareaNo: 10,
|
||||
AareaHas: 868,
|
||||
Abatch: 17,
|
||||
BareaNo: 48,
|
||||
BareaHas: 736,
|
||||
Bbatch: 15,
|
||||
const areaNum = reactive({
|
||||
storeNum: 10,
|
||||
hasBox: 10,
|
||||
noBox: 5,
|
||||
batchNo: 5,
|
||||
});
|
||||
// table数据
|
||||
const tableList = ref([
|
||||
|
|
@ -189,9 +204,63 @@ const tableList = ref([
|
|||
upWeight: "156.5",
|
||||
},
|
||||
]);
|
||||
function close(){
|
||||
emit('closeBrand',false)
|
||||
function close() {
|
||||
emit("closeBrand", false);
|
||||
}
|
||||
// table参数
|
||||
const tableTotal = ref(0);
|
||||
const tableParams = reactive({
|
||||
index: 1,
|
||||
size: 4,
|
||||
name: "",
|
||||
orderByLoc: false,
|
||||
});
|
||||
function getTableList() {
|
||||
getBrandTable(tableParams).then((res) => {
|
||||
tableList.value = res.result.data;
|
||||
|
||||
tableTotal.value = res.result.totalNum;
|
||||
});
|
||||
}
|
||||
// 计算序号
|
||||
function indexMethod(index) {
|
||||
return index + 1 + (tableParams.index - 1) * tableParams.size;
|
||||
}
|
||||
const id = ref(0);
|
||||
function getChartData() {
|
||||
getStoreMsg().then((res) => {
|
||||
for (let key in res.result[1]) {
|
||||
list.value.push({
|
||||
name: key,
|
||||
kg: res.result[1][key] * res.result[0] + "kg",
|
||||
id: id.value++,
|
||||
value: res.result[1][key] * 100,
|
||||
});
|
||||
}
|
||||
console.log(list.value);
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
//获取即时库存信息情况
|
||||
getChartData();
|
||||
// 获取货位 批次数据
|
||||
getBrandBox().then((res) => {
|
||||
for (let key in res.result) {
|
||||
console.log(res.result, key);
|
||||
if (key === "货位") {
|
||||
areaNum.storeNum = res.result[key];
|
||||
} else if (key === "实箱") {
|
||||
areaNum.hasBox = res.result[key];
|
||||
} else if (key === "空箱") {
|
||||
areaNum.noBox = res.result[key];
|
||||
} else {
|
||||
areaNum.batchNo = res.result[key];
|
||||
}
|
||||
}
|
||||
});
|
||||
// 获取即时库存table数据
|
||||
getTableList();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.pre,
|
||||
|
|
@ -201,6 +270,7 @@ function close(){
|
|||
position: absolute;
|
||||
top: 40%;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pre {
|
||||
left: 0;
|
||||
|
|
@ -250,6 +320,9 @@ function close(){
|
|||
font-family: "pangmen";
|
||||
}
|
||||
}
|
||||
&-table {
|
||||
height: vh(245);
|
||||
}
|
||||
&-chart {
|
||||
padding: 0 vw(79);
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -7,102 +7,41 @@
|
|||
</div>
|
||||
<div class="box-content">
|
||||
<el-table :data="list" style="width: 100%">
|
||||
<el-table-column prop="batchNo" label="批次号" width="180" />
|
||||
<el-table-column prop="brand" label="品牌" width="180" />
|
||||
<el-table-column prop="date" label="入库时间" />
|
||||
<el-table-column prop="batchNum" label="批次号" width="180" />
|
||||
<el-table-column prop="itemDesc" label="品牌" width="180" />
|
||||
<el-table-column prop="inTime" label="入库时间" />
|
||||
<el-table-column prop="weight" label="重量(kg)" />
|
||||
<el-table-column prop="Cases" label="箱数" />
|
||||
<el-table-column prop="boxCount" label="箱数" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import {getInventoryMessage} from '@/api/home'
|
||||
import getPath from "@/utils/getPath";
|
||||
const emit = defineEmits(["close"]);
|
||||
const list = ref([
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
batchNum: "YXZZP2303001",
|
||||
itemDesc: "利群(新版)烟丝",
|
||||
inTime: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
},
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
},
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
},
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
},
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
},
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
},
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
},
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
},
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
},
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
},
|
||||
{
|
||||
batchNo: "YXZZP2303001",
|
||||
brand: "利群(新版)烟丝",
|
||||
date: "2023-04-08",
|
||||
weight: "2767.52",
|
||||
Cases: "66",
|
||||
boxCount: "66",
|
||||
},
|
||||
]);
|
||||
function close() {
|
||||
emit("close", false);
|
||||
}
|
||||
onMounted(()=>{
|
||||
getInventoryMessage().then(res=>{
|
||||
console.log(res,'xxxxxxxx');
|
||||
if(res.code==200){
|
||||
list.value = res.result
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
|
|
|
|||
|
|
@ -204,19 +204,20 @@ import {
|
|||
getInOrder,
|
||||
getOutOrder,
|
||||
getLocInfo,
|
||||
|
||||
} from "@/api/home";
|
||||
// 设备状态列表
|
||||
const deviceList = ref([
|
||||
{
|
||||
deviceStatus: "运行设备",
|
||||
deviceNum: 1889,
|
||||
deviceImg: getPath.operatingEquipment,
|
||||
deviceImg: getPath.operatingEquipment1,
|
||||
color: "color:rgba(164, 255, 236, 1)",
|
||||
},
|
||||
{
|
||||
deviceStatus: "设备故障",
|
||||
deviceNum: 26,
|
||||
deviceImg: getPath.equipmentFailure,
|
||||
deviceImg: getPath.equipmentFailure1,
|
||||
color: "color:rgba(255, 244, 166, 1)",
|
||||
},
|
||||
]);
|
||||
|
|
@ -758,7 +759,6 @@ onMounted(() => {
|
|||
.home {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-size: 100% 100%;
|
||||
background-image: url("@/assets/images/home/home-bg.png");
|
||||
padding: vh(104) vw(20) 0 vw(20);
|
||||
|
|
@ -798,6 +798,9 @@ onMounted(() => {
|
|||
width: vw(368);
|
||||
}
|
||||
&-left {
|
||||
background-image: url("@/assets/images/home/左侧遮罩.png");
|
||||
background-size: 101%;
|
||||
// width: 22%;
|
||||
&-device {
|
||||
display: flex;
|
||||
height: vh(186);
|
||||
|
|
@ -881,6 +884,7 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
&-right {
|
||||
background-image: url("@/assets/images/home/right-bg.png");
|
||||
&-inventoryNews {
|
||||
height: vh(222);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
import path from "path";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
|
|
|
|||
Loading…
Reference in New Issue