10.25代码提交
This commit is contained in:
parent
c3b1d338c1
commit
e9ad90c9bd
|
|
@ -5,7 +5,7 @@ VITE_APP_TITLE = 烟厂
|
|||
VITE_APP_ENV = 'production'
|
||||
|
||||
#生产环境
|
||||
VITE_APP_BASE_API = '/prod-api'
|
||||
VITE_APP_BASE_API = ''
|
||||
|
||||
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
||||
VITE_BUILD_COMPRESS = gzip
|
||||
|
|
@ -5,9 +5,15 @@
|
|||
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" />-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>延安烟厂</title>
|
||||
<style type="text/css">
|
||||
[v-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="app" v-cloak></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@enhances/bigscreen-fit-vue3": "^0.2.6",
|
||||
"amfe-flexible": "^2.2.1",
|
||||
"axios": "^1.7.2",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.3.14",
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"postcss-pxtorem": "^6.1.0",
|
||||
"sass": "^1.77.6",
|
||||
"sass-loader": "^14.2.1",
|
||||
"vite": "^4.4.5"
|
||||
|
|
@ -1066,6 +1068,11 @@
|
|||
"ajv": "^6.9.1"
|
||||
}
|
||||
},
|
||||
"node_modules/amfe-flexible": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
|
||||
"integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw=="
|
||||
},
|
||||
"node_modules/anymatch": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
|
||||
|
|
@ -2074,6 +2081,15 @@
|
|||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss-pxtorem": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
|
||||
"integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"postcss": "^8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/process": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
|
||||
|
|
@ -3750,6 +3766,11 @@
|
|||
"peer": true,
|
||||
"requires": {}
|
||||
},
|
||||
"amfe-flexible": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/amfe-flexible/-/amfe-flexible-2.2.1.tgz",
|
||||
"integrity": "sha512-L2VfvDzoETBjhRptg5u/IUuzHSuxm22JpSRb404p/TBGeRfwWmmNEbB+TFPIP/sS/+pbM18bCFH9QnMojLuPNw=="
|
||||
},
|
||||
"anymatch": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
|
||||
|
|
@ -4523,6 +4544,13 @@
|
|||
"source-map-js": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"postcss-pxtorem": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/postcss-pxtorem/-/postcss-pxtorem-6.1.0.tgz",
|
||||
"integrity": "sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"process": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@enhances/bigscreen-fit-vue3": "^0.2.6",
|
||||
"amfe-flexible": "^2.2.1",
|
||||
"axios": "^1.7.2",
|
||||
"echarts": "^5.5.1",
|
||||
"element-plus": "^2.3.14",
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"postcss-pxtorem": "^6.1.0",
|
||||
"sass": "^1.77.6",
|
||||
"sass-loader": "^14.2.1",
|
||||
"vite": "^4.4.5"
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1 +1 @@
|
|||
172.16.1.104:5005
|
||||
172.16.1.106:5005
|
||||
|
|
@ -1,97 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<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">
|
||||
<style>
|
||||
body,html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
body,html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</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">
|
||||
</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 id="unity-progress-bar-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="unity-warning"></div>
|
||||
<div id="unity-footer">
|
||||
</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>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
<button onclick="OpenHtmlMQTT()">Connect</button>
|
||||
<button onclick="publishMessage()">Publish</button>
|
||||
<button onclick="disconnectMQTT()">Disconnect</button>
|
||||
<script src="./js/mqtt.min.js"></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");
|
||||
|
||||
|
||||
<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");
|
||||
|
||||
// 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) {
|
||||
// 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';
|
||||
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);
|
||||
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||||
setTimeout(function() {
|
||||
warningBanner.removeChild(div);
|
||||
updateBannerVisibility();
|
||||
}, 5000);
|
||||
}
|
||||
updateBannerVisibility();
|
||||
}
|
||||
}
|
||||
|
||||
var buildUrl = "Build";
|
||||
var loaderUrl = buildUrl + "/webgl.loader.js";
|
||||
var config = {
|
||||
dataUrl: buildUrl + "/webgl.data.unityweb",
|
||||
frameworkUrl: buildUrl + "/webgl.framework.js.unityweb",
|
||||
codeUrl: buildUrl + "/webgl.wasm.unityweb",
|
||||
var buildUrl = "Build";
|
||||
var loaderUrl = buildUrl + "/延安烟厂.loader.js";
|
||||
var config = {
|
||||
dataUrl: buildUrl + "/延安烟厂.data.unityweb",
|
||||
frameworkUrl: buildUrl + "/延安烟厂.framework.js.unityweb",
|
||||
codeUrl: buildUrl + "/延安烟厂.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;
|
||||
// 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)) {
|
||||
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');
|
||||
|
|
@ -106,112 +98,32 @@
|
|||
// config.devicePixelRatio = 1;
|
||||
|
||||
|
||||
} else {
|
||||
} else {
|
||||
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||
|
||||
// canvas.style.width = "960px";
|
||||
// canvas.style.height = "600px";
|
||||
}
|
||||
// canvas.style.width = "1920px";
|
||||
// canvas.style.height = "1080px";
|
||||
}
|
||||
|
||||
loadingBar.style.display = "block";
|
||||
|
||||
//----------------------------------------------------------------------------------MQTT-----------------------------------------------------------------------------
|
||||
let client;
|
||||
|
||||
function OpenHtmlMQTT() {
|
||||
client = mqtt.connect('ws://172.16.1.104:8083/mqtt');
|
||||
|
||||
client.on('connect', () => {
|
||||
console.log('连接...');
|
||||
|
||||
const devices = [
|
||||
Array.from({length: 10}, (_, i) => `car${i + 1}`),//小车
|
||||
"cm1",//去加盖机
|
||||
Array.from({length: 7}, (_, i) => `convoyor510${i + 1}`),//输送机
|
||||
Array.from({length: 51}, (_, i) => `convoyor52${String(i + 1).padStart(2, '0')}`),//输送机
|
||||
Array.from({length: 30}, (_, i) => `convoyor54${String(i + 1).padStart(2, '0')}`),//输送机
|
||||
Array.from({length: 4}, (_, i) => `dpm${i + 1}`),//拆码垛机
|
||||
Array.from({length: 7}, (_, i) => `elv${i + 1}`),//提升机
|
||||
"fe1",//落地时提升机
|
||||
Array.from({length: 2}, (_, i) => `qcbd${i + 1}`)//快换电池装置
|
||||
];
|
||||
|
||||
devices.forEach(device => {
|
||||
console.log(device);
|
||||
client.subscribe(device, {
|
||||
onSuccess: () => {
|
||||
console.log(`已订阅： ${device}`);
|
||||
},
|
||||
onFailure: (err) => {
|
||||
console.error(`订阅失败： ${device}:`, err);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// client.subscribe('car1', (err) => {
|
||||
// if (!err) {
|
||||
// console.log('Subscribed to car1');
|
||||
// }
|
||||
// });
|
||||
//
|
||||
|
||||
});
|
||||
|
||||
client.on('message', (topic, message) => {
|
||||
|
||||
const mes = JSON.stringify({device: topic, message: message.toString()});
|
||||
|
||||
// console.log(mes);
|
||||
|
||||
unityInstance.SendMessage('APP', 'Message', mes)
|
||||
|
||||
});
|
||||
|
||||
client.on('error', (err) => {
|
||||
console.error('Connection error: ', err);
|
||||
});
|
||||
}
|
||||
|
||||
function publishMessage() {
|
||||
if (client) {
|
||||
client.publish('car1', 'Hello');
|
||||
}
|
||||
}
|
||||
|
||||
function disconnectMQTT() {
|
||||
if (client) {
|
||||
client.end(() => {
|
||||
console.log('关闭连接');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------MQTT-----------------------------------------------------------------------------
|
||||
|
||||
|
||||
loadingBar.style.display = "block";
|
||||
|
||||
var script = document.createElement("script");
|
||||
script.src = loaderUrl;
|
||||
script.onload = () => {
|
||||
var script = document.createElement("script");
|
||||
script.src = loaderUrl;
|
||||
script.onload = () => {
|
||||
createUnityInstance(canvas, config, (progress) => {
|
||||
progressBarFull.style.width = 100 * progress + "%";
|
||||
}).then((unityInstance) => {
|
||||
loadingBar.style.display = "none";
|
||||
|
||||
// 为window添加unityInstance对象
|
||||
window.unityInstance = unityInstance
|
||||
|
||||
fullscreenButton.onclick = () => {
|
||||
unityInstance.SetFullscreen(1);
|
||||
progressBarFull.style.width = 100 * progress + "%";
|
||||
}).then((unityInstance) => {
|
||||
loadingBar.style.display = "none";
|
||||
fullscreenButton.onclick = () => {
|
||||
unityInstance.SetFullscreen(1);
|
||||
};
|
||||
}).catch((message) => {
|
||||
alert(message);
|
||||
});
|
||||
};
|
||||
}).catch((message) => {
|
||||
alert(message);
|
||||
});
|
||||
};
|
||||
|
||||
document.body.appendChild(script);
|
||||
document.body.appendChild(script);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,48 +1,8 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!--
|
||||
有关如何配置 ASP.NET 应用程序的详细信息，请访问
|
||||
https://go.microsoft.com/fwlink/?LinkId=169433
|
||||
-->
|
||||
<configuration>
|
||||
<system.webServer>
|
||||
<httpProtocol>
|
||||
<!-- 允许跨域配置 -->
|
||||
<customHeaders>
|
||||
<add name="Access-Control-Allow-Origin" value="*" />
|
||||
<add name="Access-Control-Allow-Headers" value="X-Requested-With,Content-Type,Authorization" />
|
||||
<add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE,OPTIONS" />
|
||||
<add name="Access-Control-Allow-Credentials" value="true" />
|
||||
</customHeaders>
|
||||
</httpProtocol>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<configuration>
|
||||
<system.webServer>
|
||||
<staticContent>
|
||||
<remove fileExtension=".mem" />
|
||||
<remove fileExtension=".data" />
|
||||
<remove fileExtension=".unity3d" />
|
||||
<remove fileExtension=".jsbr" />
|
||||
<remove fileExtension=".membr" />
|
||||
<remove fileExtension=".databr" />
|
||||
<remove fileExtension=".unity3dbr" />
|
||||
<remove fileExtension=".jsgz" />
|
||||
<remove fileExtension=".memgz" />
|
||||
<remove fileExtension=".datagz" />
|
||||
<remove fileExtension=".unity3dgz" />
|
||||
<remove fileExtension=".json" />
|
||||
<remove fileExtension=".unityweb" />
|
||||
|
||||
<mimeMap fileExtension=".mem" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".data" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".jsbr" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".membr" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".databr" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".unity3dbr" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".jsgz" mimeType="application/x-javascript; charset=UTF-8" />
|
||||
<mimeMap fileExtension=".memgz" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".datagz" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".unity3dgz" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8" />
|
||||
<mimeMap fileExtension=".unityweb" mimeType="application/octet-stream" />
|
||||
<mimeMap fileExtension=".framework.js.gz" mimeType="application/octet-stream" />
|
||||
</staticContent>
|
||||
</system.webServer>
|
||||
</configuration>
|
||||
</system.webServer>
|
||||
</configuration>
|
||||
|
|
|
|||
61
src/App.vue
61
src/App.vue
|
|
@ -1,70 +1,13 @@
|
|||
<script setup>
|
||||
import { getNowTime } from "@/utils/common";
|
||||
import { onMounted, ref } from "vue";
|
||||
import cloudy from '@/assets/images/login/cloudy.png'
|
||||
const nowDate = ref("");
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
nowDate.value = getNowTime(true);
|
||||
}, 1000);
|
||||
});
|
||||
import Nav from "@/views/home/components/layout.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="header-date">
|
||||
{{ nowDate }}
|
||||
</div>
|
||||
<div class="header-title">
|
||||
智能仓储全息可视化平台
|
||||
</div>
|
||||
<div class="header-weather">
|
||||
<!-- <el-image style="width: 1.5rem; height: 1.5rem" :src="cloudy" fit="fill" />
|
||||
<span>多云 12℃</span> -->
|
||||
</div>
|
||||
</header>
|
||||
<!-- <Nav /> -->
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./assets/font/font.css";
|
||||
// @import "./style.css";
|
||||
.header {
|
||||
background-image: url("@/assets/images/header.png");
|
||||
width: 100%;
|
||||
height: vh(160);
|
||||
background-size: 100% 100%;
|
||||
padding: 0 2.5rem;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
z-index: 88;
|
||||
top: 0;
|
||||
left: 0;
|
||||
&-title{
|
||||
margin-top: vh(8);
|
||||
width: vw(838);
|
||||
text-align: center;
|
||||
background-clip:text;
|
||||
-webkit-background-clip:text;
|
||||
-webkit-text-fill-color:transparent;
|
||||
font-size: 2.625rem;
|
||||
font-family: 'pangmen';
|
||||
float: left;
|
||||
letter-spacing: 0.5rem;
|
||||
background-image:-webkit-linear-gradient(270deg, #FFFFFF 0%, #FFFFFF 37%, #11ABEA 100%);
|
||||
}
|
||||
&-date,&-weather{
|
||||
width: vw(500);
|
||||
float: left;
|
||||
margin-top: vh(21)
|
||||
}
|
||||
&-weather{
|
||||
|
||||
text-align: right;
|
||||
span{
|
||||
vertical-align: top;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -91,4 +91,21 @@ export function getBrandTable(params){
|
|||
params
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
// 出库工单详情
|
||||
export function getConOutOrder(params){
|
||||
return request({
|
||||
url:'/api/outOrder/GetConOutOrder',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
|
||||
}
|
||||
// 入库工单详情
|
||||
export function getConInOrder(params){
|
||||
return request({
|
||||
url:'/api/inOrder/GetConInOrder',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,10 +69,18 @@ export function getOutBrandTimeCount(params){
|
|||
}
|
||||
|
||||
|
||||
// 装箱站入库统计
|
||||
export function getWeightBetweenTime(params){
|
||||
// 出库统计
|
||||
export function getConvoyorsOut(params){
|
||||
return request({
|
||||
url:'/api/inOrder/GetWeightBetweenTime',
|
||||
url:'/api/outOrder/GetConvoyorsOut',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
// 入库统计
|
||||
export function getConvoyorsIn(params){
|
||||
return request({
|
||||
url:'/api/inOrder/GetConvoyorsIn',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.4 KiB |
|
|
@ -72,14 +72,22 @@ $designHeight: 1080 ;
|
|||
border-color: transparent;
|
||||
}
|
||||
:deep(.el-pager li) {
|
||||
font-size: 0.8rem;
|
||||
width: vw(36);
|
||||
height: vh(28);
|
||||
// padding: 0;
|
||||
background-color: #d8e9fd0d;
|
||||
color: #fff;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
:deep(.el-pagination){
|
||||
margin-top: vh(10);
|
||||
}
|
||||
:deep(.el-pagination button) {
|
||||
background-color: rgba(216, 233, 253, 0.05);
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.8rem !important;
|
||||
width: vw(45);
|
||||
height: vh(28);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -96,11 +104,11 @@ $designHeight: 1080 ;
|
|||
color: #fff;
|
||||
position: absolute;
|
||||
left: vw(20);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
:deep(.el-input .el-input__wrapper.is-focus) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||
// border-color: #dcdfe6 !important;
|
||||
box-shadow: none !important;
|
||||
|
|
@ -122,6 +130,7 @@ $designHeight: 1080 ;
|
|||
1 1;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
font-size: 0.875rem;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@
|
|||
display: flex;
|
||||
font-size: 1.875rem;
|
||||
justify-content: center;
|
||||
&-date{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
&-title{
|
||||
line-height: vh(60);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
<template>
|
||||
<div :id="'classProportion' + dataMap.id" ref="classProportionRef"></div>
|
||||
<div id="tooltipDiv" style="z-index:99999999999">
|
||||
xxxxxxxxxxx
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { nextTick, onMounted, watch, ref,defineProps } from "vue";
|
||||
import { nextTick, onMounted, watch, ref, defineProps } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import getPath from '@/utils/getPath'
|
||||
import getPath from "@/utils/getPath";
|
||||
import { fontSize } from "@/utils/common";
|
||||
const props = defineProps({
|
||||
dataMap: Object,
|
||||
});
|
||||
|
|
@ -18,16 +22,17 @@ watch(
|
|||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
function initChart() {
|
||||
console.log(props.dataMap.value, "props.dataMap.value");
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("classProportion" + props.dataMap.id)
|
||||
);
|
||||
let fontSize = (window.innerHeight * 32) / 1080;
|
||||
let fontSize1 = (window.innerHeight * 14) / 1080;
|
||||
|
||||
// let fontSize = (window.innerHeight * 27) / 1080;
|
||||
// let fontSize1 = (window.innerHeight * 14) / 1080;
|
||||
var data = {
|
||||
value: [props.dataMap.value],
|
||||
nAmount: 1566557.14,
|
||||
// nAmount: 1566557.14,
|
||||
};
|
||||
|
||||
var color = ["rgb(50,100,162)", "rgb(50,100,162)", "rgb(50,100,162)"];
|
||||
|
|
@ -37,16 +42,17 @@ function initChart() {
|
|||
text: `{a|${data.value[0]}}{b|%}`,
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
confine: true,
|
||||
textShadowColor: "#005DFF",
|
||||
textShadowBlur: 16,
|
||||
rich: {
|
||||
a: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: `${fontSize}`,
|
||||
fontSize: `${fontSize(0.25)}`,
|
||||
fontFamily: "siyuan",
|
||||
},
|
||||
b: {
|
||||
fontSize: `${fontSize1}`,
|
||||
fontSize: `${fontSize(0.14)}`,
|
||||
fontFamily: "siyuan",
|
||||
// color: "#FFFFFF",
|
||||
// padding: [10, 0, 0, 10],
|
||||
|
|
@ -59,19 +65,38 @@ function initChart() {
|
|||
// fontSize: 30
|
||||
// },
|
||||
left: "center",
|
||||
top: props.dataMap.kg?"25%":'23%',
|
||||
top: "25%",
|
||||
},
|
||||
graphic: [
|
||||
// {
|
||||
// type: "image",
|
||||
// style: {
|
||||
// image: props.dataMap.name ? getPath.fontBg : "", // 图片地址
|
||||
// width: fontSize(1),
|
||||
// height: fontSize(0.24),
|
||||
// },
|
||||
// // left: '18.5%',
|
||||
// left: "center", // 【主要代码1】
|
||||
// top: "65.5%",
|
||||
// },
|
||||
{
|
||||
type: "image",
|
||||
type: "text",
|
||||
name:'name',
|
||||
z: 100,
|
||||
left: "center",
|
||||
top: "72%",
|
||||
style: {
|
||||
image: props.dataMap.name?getPath.fontBg:'', // 图片地址
|
||||
width: 52,
|
||||
height: 24,
|
||||
fill: "#fff",
|
||||
textAlign: 'left',
|
||||
text: `${props.dataMap.name.length>7 ? props.dataMap.name.slice(0,7) + '...' : props.dataMap.name}`,
|
||||
fontSize: `0.8rem`,
|
||||
width: 20,
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis'
|
||||
},
|
||||
// left: '18.5%',
|
||||
left: "center", // 【主要代码1】
|
||||
top: "65.5%",
|
||||
name:props.dataMap.name
|
||||
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
|
|
@ -80,18 +105,7 @@ function initChart() {
|
|||
top: "69%",
|
||||
style: {
|
||||
fill: "#fff",
|
||||
text: `${props.dataMap.name?props.dataMap.name:''}`,
|
||||
fontSize: `0.8rem`,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
z: 100,
|
||||
left: "center",
|
||||
top: '78%',
|
||||
style: {
|
||||
fill: "#fff",
|
||||
text: `${props.dataMap.type?props.dataMap.type:''}`,
|
||||
text: `${props.dataMap.type ? props.dataMap.type : ""}`,
|
||||
fontSize: `0.9rem`,
|
||||
},
|
||||
},
|
||||
|
|
@ -102,12 +116,13 @@ function initChart() {
|
|||
top: "85%",
|
||||
style: {
|
||||
fill: "rgba(255, 206, 84, 1)",
|
||||
text: `${props.dataMap.kg?props.dataMap.kg:''}`,
|
||||
fontSize: `18`,
|
||||
text: `${props.dataMap.kg ? props.dataMap.kg : ""}`,
|
||||
fontSize: `1.1rem`,
|
||||
},
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
confine: true,
|
||||
trigger: "item",
|
||||
backgroundColor: "rgba(38,67,108,0.85)",
|
||||
borderColor: "#D4E8FF",
|
||||
|
|
@ -119,10 +134,12 @@ function initChart() {
|
|||
color: "#DDF3FF",
|
||||
},
|
||||
formatter: function (params) {
|
||||
// 添加你的单位，这里示例单位为 %
|
||||
// let unit = "兆瓦";
|
||||
return `<div style="width:100%;height:100%;font-size:12px;background: rgba(38,67,108,0.85);">
|
||||
占比：${params.value}%
|
||||
console.log(params,'xxxxxxxxxx');
|
||||
|
||||
// 添加你的单位，这里示例单位为 %
|
||||
// let unit = "兆瓦";
|
||||
return `<div style="width:80%;height:100%;background: rgba(38,67,108,0.85);">
|
||||
数量：${props.dataMap.kg}
|
||||
</div>`;
|
||||
},
|
||||
// formatter: function (params) {
|
||||
|
|
@ -152,7 +169,7 @@ function initChart() {
|
|||
polar: [
|
||||
{
|
||||
center: ["50%", "35%"], //中心点位置
|
||||
radius: ["67%", "60%"], //图形大小
|
||||
radius: ["74%", "67%"], //图形大小
|
||||
},
|
||||
],
|
||||
|
||||
|
|
@ -160,7 +177,7 @@ function initChart() {
|
|||
{
|
||||
type: "pie",
|
||||
name: "内层细圆环",
|
||||
radius: ["90%", "80%"],
|
||||
radius: ["95%", "85%"],
|
||||
center: ["50%", "35%"],
|
||||
startAngle: 90,
|
||||
hoverAnimation: false,
|
||||
|
|
@ -203,7 +220,7 @@ function initChart() {
|
|||
{
|
||||
type: "pie",
|
||||
name: "内层细圆环",
|
||||
radius: ["65%", "60%"],
|
||||
radius: ["72%", "67%"],
|
||||
center: ["50%", "35%"],
|
||||
startAngle: 90,
|
||||
hoverAnimation: false,
|
||||
|
|
@ -231,6 +248,8 @@ function initChart() {
|
|||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
|
|
@ -238,7 +257,7 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
div{
|
||||
div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@
|
|||
:total="total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@current-change="getMaintenancePlanData"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -233,13 +233,14 @@ onMounted(() => {
|
|||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: vh(48);
|
||||
font-size: 0.875rem;
|
||||
font-size: 0.875rem !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: rgba(174, 211, 255, 0.03);
|
||||
margin-bottom: vh(12);
|
||||
.preview {
|
||||
// font-size: 1rem;
|
||||
color: rgba(25, 174, 250, 1);
|
||||
margin-right: vw(24);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,21 +24,21 @@
|
|||
</div>
|
||||
<div style="display: flex">
|
||||
<div class="box-content-plate1">
|
||||
<div class="produce" v-for="item in deviceList" :key="item.id">
|
||||
<div class="produce-name">{{ item.name }}</div>
|
||||
<div class="produce-msg">
|
||||
<!-- <div class="produce" v-for="item in deviceList" :key="item.id"> -->
|
||||
<!-- <div class="produce-name">{{ item.name }}</div> -->
|
||||
<!-- <div class="produce-msg">
|
||||
<section class="avg">
|
||||
<span>平均生产力</span>
|
||||
<span>{{ item.avgPro }}</span>
|
||||
<span>（千克/天）</span>
|
||||
<span>（公斤/天）</span>
|
||||
</section>
|
||||
<section class="total">
|
||||
<span>生产总量</span>
|
||||
<span>{{ item.total }}</span>
|
||||
<span>（千克）</span>
|
||||
<span>（公斤）</span>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="box-content-plate2">
|
||||
<div id="chart1"></div>
|
||||
|
|
@ -52,14 +52,14 @@
|
|||
import { ref, defineProps, onMounted, nextTick, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import moment from "moment";
|
||||
import { getWeightBetweenTime } from "@/api/productionInformation";
|
||||
import { getConvoyorsOut, getConvoyorsIn } from "@/api/productionInformation";
|
||||
const emit = defineEmits(["closeMachine"]);
|
||||
const deviceList = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "1号翻箱机",
|
||||
total: "222699.28",
|
||||
avgPro: "27897.41",
|
||||
// name: "1号翻箱机",
|
||||
// total: "222699.28",
|
||||
// avgPro: "27897.41",
|
||||
},
|
||||
// {
|
||||
// name: "2号翻箱机",
|
||||
|
|
@ -70,7 +70,7 @@ const deviceList = ref([
|
|||
]);
|
||||
// 时间区间
|
||||
const date = ref([
|
||||
moment().subtract(1, "days").format("YYYY-MM-DD"),
|
||||
moment().subtract(7, "days").format("YYYY-MM-DD"),
|
||||
moment().format("YYYY-MM-DD"),
|
||||
]);
|
||||
|
||||
|
|
@ -82,136 +82,181 @@ function close() {
|
|||
}
|
||||
|
||||
// 头部的轮播图
|
||||
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");
|
||||
function drawChart1(data) {
|
||||
|
||||
const newData = [];
|
||||
const keys = Object.keys(data[0].nums);
|
||||
|
||||
keys.forEach((key) => {
|
||||
const values = data.map((item) => item.nums[key]);
|
||||
newData.push({ name: key, value: values });
|
||||
});
|
||||
|
||||
// console.log(newData);
|
||||
// console.log(arr);
|
||||
let color = [
|
||||
"rgba(25, 174, 250, 1)",
|
||||
"rgba(28, 238, 251, 1)",
|
||||
"rgba(255, 206, 84, 1)",
|
||||
"rgba(174, 211, 255, 1)",
|
||||
];
|
||||
let color1 = [
|
||||
"rgba(25, 174, 250, 0)",
|
||||
"rgba(28, 238, 251, 0)",
|
||||
"rgba(255, 206, 84, 0)",
|
||||
"rgba(174, 211, 255, 0)",
|
||||
];
|
||||
let dom = document.getElementById("chart1");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
let option = {
|
||||
tooltip: {},
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "3%",
|
||||
right: "5%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
// let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
// type: "slider", // 设置为滑动条型式
|
||||
// show: true, // 显示dataZoom组件
|
||||
// start: 0, // 默认显示的起始位置为0
|
||||
// end: 49, // 默认显示的结束位置为100
|
||||
// handleSize: 8, // 滑动条的手柄大小
|
||||
// handleStyle: {
|
||||
// color: "#DCE2E8", // 滑动条的手柄颜色
|
||||
// },
|
||||
// xAxisIndex: [0], // 表示控制第一个x轴
|
||||
// filterMode: "filter", // 设置为filter模式，即数据超过范围时会被过滤掉
|
||||
// },
|
||||
// ],
|
||||
|
||||
grid: {
|
||||
borderWidth: 0,
|
||||
top: 40,
|
||||
bottom: 40,
|
||||
left: 50,
|
||||
right: 20,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
icon: "rect",
|
||||
right: "4%",
|
||||
top: "3%",
|
||||
itemWidth: 20, // 标签宽度为20px
|
||||
itemHeight: 10, // 标签高度为10px
|
||||
textStyle: {
|
||||
color: "#ffffff",
|
||||
},
|
||||
data: newData.map((el) => {
|
||||
return el.name;
|
||||
}),
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
interval: 0,
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
trigger: "axis",
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#233e64",
|
||||
// type:'dashed',
|
||||
color: "#557775",
|
||||
// color: "#233e64",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
// align:'left',
|
||||
// rotate:180,
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "0.875rem",
|
||||
// margin: 15,
|
||||
color: "#DDFFFD",
|
||||
margin: 40,
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
data: xData,
|
||||
data: data.map((el) => {
|
||||
return el.dateTime.split(' ')[0];
|
||||
}),
|
||||
// data: data.map((el) => {
|
||||
// return el.time;
|
||||
// }),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位:kg",
|
||||
name: "单位:公斤",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "0.875rem",
|
||||
color: "#DDFFFD",
|
||||
// align:"right",
|
||||
padding: [0, 30, 0, 0],
|
||||
},
|
||||
// splitNumber: 5,
|
||||
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#233e64",
|
||||
type: "dashed",
|
||||
color: "rgba(255,255,255, 0.30)",
|
||||
},
|
||||
},
|
||||
axisLine: { show: false },
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "0.875rem",
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
// formatter: function (value) {
|
||||
// // 如果数值大于1000，则以千位分隔
|
||||
// if (value >= 1000) {
|
||||
// return value / 10000 + "万";
|
||||
// } else if (value >= 10000000) {
|
||||
// return value / 100000000 + "亿";
|
||||
// } else {
|
||||
// return value;
|
||||
// }
|
||||
// },
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "异常流量",
|
||||
type: "line",
|
||||
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbolSize: 0,
|
||||
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "rgba(24, 174, 250, 1)", // 线条颜色
|
||||
},
|
||||
series: newData.map((el, index) => {
|
||||
|
||||
return {
|
||||
name: el.name,
|
||||
type: "bar",
|
||||
barMaxWidth: 15,
|
||||
stack: "Total1",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
areaStyle: {
|
||||
//区域填充样式
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: "rgba(25, 174, 250, 1)" },
|
||||
{ offset: 0.9, color: "rgba(25, 174, 250, 0)" },
|
||||
],
|
||||
false
|
||||
),
|
||||
|
||||
// shadowColor: "rgba(25, 174, 250, 1)", //阴影颜色
|
||||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
itemStyle: {
|
||||
// normal: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: color[index],
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: color1[index],
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
},
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
data: el.value,
|
||||
};
|
||||
}),
|
||||
};
|
||||
nextTick(() => {
|
||||
myChart.setOption(option);
|
||||
});
|
||||
|
||||
myChart.setOption(option);
|
||||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
});
|
||||
}
|
||||
// 底部的折线图
|
||||
|
|
@ -332,12 +377,8 @@ function drawChart2() {
|
|||
}
|
||||
// 筛选的时间参数
|
||||
const params = reactive({
|
||||
startTimeYear: "",
|
||||
startTimeMonth: "",
|
||||
startTimeDay: "",
|
||||
endTimeYear: "",
|
||||
endTimeMonth: "",
|
||||
endTimeDay: "",
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
});
|
||||
|
||||
// const
|
||||
|
|
@ -347,20 +388,25 @@ function getCountData(val) {
|
|||
date.value[0] = moment(date.value[0]).format("YYYY-MM-DD");
|
||||
date.value[1] = moment(date.value[1]).format("YYYY-MM-DD");
|
||||
}
|
||||
params.startTime = date.value[0];
|
||||
params.endTime = date.value[1];
|
||||
|
||||
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);
|
||||
});
|
||||
if (props.title == "出库统计") {
|
||||
getConvoyorsOut(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
drawChart1(res.result);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
getConvoyorsIn(params).then((res) => {
|
||||
drawChart1(res.result);
|
||||
});
|
||||
}
|
||||
// getWeightBetweenTime(params).then((res) => {
|
||||
// deviceList.value[0].total = res.result.totalNum;
|
||||
// deviceList.value[0].avgPro = res.result.percentNum;
|
||||
// drawChart1(res.result.dictionary);
|
||||
// });
|
||||
}
|
||||
onMounted(() => {
|
||||
getCountData();
|
||||
|
|
@ -420,9 +466,9 @@ onMounted(() => {
|
|||
font-family: "pangmen";
|
||||
}
|
||||
&-plate1 {
|
||||
float: left;
|
||||
width: vw(224);
|
||||
height: vh(592);
|
||||
// float: left;
|
||||
// width: vw(224);
|
||||
// height: vh(592);
|
||||
.produce {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -486,9 +532,9 @@ onMounted(() => {
|
|||
#chart1,
|
||||
#chart2 {
|
||||
margin-top: vh(20);
|
||||
width: vw(800);
|
||||
width: vw(1048);
|
||||
// height: vh(228);
|
||||
height: vh(456);
|
||||
height: vh(480);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
v-for="(item, index) in Math.ceil(chartList.length / 8)"
|
||||
:key="item.id"
|
||||
>
|
||||
<div v-if="index == chartIndex" style="display: flex">
|
||||
<div v-if="index == chartIndex" style="display: flex;width: 100%;" >
|
||||
<div
|
||||
class="box-content-chart-item"
|
||||
v-for="item in chartList.slice(index * 8, 8 * (index + 1))"
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
<span> 入库信息统计 </span>
|
||||
<div>
|
||||
<ul v-if="storeList">
|
||||
<li><span>单位：</span><span>kg</span></li>
|
||||
<li><span>单位：</span><span>公斤</span></li>
|
||||
<li>
|
||||
<span>总量：</span><span>{{ storeList.totalWeight }}</span>
|
||||
</li>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
type="year"
|
||||
placeholder="请选择年份"
|
||||
@change="
|
||||
getAllBrandName(true);
|
||||
getBrandChart(true);
|
||||
"
|
||||
/>
|
||||
</section>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
class="m-2"
|
||||
placeholder="请选择月份"
|
||||
clearable
|
||||
@change="getAllBrandName()"
|
||||
@change="getBrandChart()"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item,index) in options"
|
||||
|
|
@ -90,9 +90,10 @@
|
|||
<el-collapse-item title="品牌" name="1">
|
||||
<div class="brand">
|
||||
<div
|
||||
v-for="item in brandList"
|
||||
v-for="(item,index) in brandList"
|
||||
:key="item"
|
||||
class="brand-item"
|
||||
@click="selectBrand(item,index)"
|
||||
:class="index==brandIndex?'num-select brand-item':'brand-item'"
|
||||
>
|
||||
<span>{{ item.slice(0, 2) }}</span>
|
||||
<span>{{ item.slice(2) }}</span>
|
||||
|
|
@ -125,92 +126,99 @@ import * as echarts from "echarts";
|
|||
const props = defineProps({
|
||||
title: String,
|
||||
});
|
||||
|
||||
// 品牌列表默认选中
|
||||
const brandIndex = ref(0)
|
||||
const options = ref(['1','2','3','4','5','6','7','8','9','10','11','12'])
|
||||
const activeNames = ref(["1"]);
|
||||
const emit = defineEmits(["closeBoundMsg"]);
|
||||
const chartIndex = ref(0);
|
||||
const btnName = ref("left");
|
||||
const chartList = ref([
|
||||
{
|
||||
id: 11,
|
||||
name: "利群",
|
||||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "利群",
|
||||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "利群",
|
||||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "利群",
|
||||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "利群",
|
||||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "利群",
|
||||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
name: "利群",
|
||||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
name: "利群",
|
||||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
// {
|
||||
// id: 11,
|
||||
// name: "利群",
|
||||
// type: "(硬珍品)烟丝",
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// id: 12,
|
||||
// name: "利群",
|
||||
// type: "(硬珍品)烟丝",
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// id: 13,
|
||||
// name: "利群",
|
||||
// type: "(硬珍品)烟丝",
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// id: 14,
|
||||
// name: "利群",
|
||||
// type: "(硬珍品)烟丝",
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// id: 15,
|
||||
// name: "利群",
|
||||
// type: "(硬珍品)烟丝",
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// id: 16,
|
||||
// name: "利群",
|
||||
// type: "(硬珍品)烟丝",
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// id: 17,
|
||||
// name: "利群",
|
||||
// type: "(硬珍品)烟丝",
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// id: 18,
|
||||
// name: "利群",
|
||||
// type: "(硬珍品)烟丝",
|
||||
// value: 20,
|
||||
// },
|
||||
|
||||
{
|
||||
id: 19,
|
||||
name: "利群",
|
||||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
name: "利群",
|
||||
type: "(硬珍品)烟丝",
|
||||
value: 20,
|
||||
},
|
||||
// {
|
||||
// id: 19,
|
||||
// name: "利群",
|
||||
// type: "(硬珍品)烟丝",
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// id: 20,
|
||||
// name: "利群",
|
||||
// type: "(硬珍品)烟丝",
|
||||
// value: 20,
|
||||
// },
|
||||
]);
|
||||
// 获取占比图列表
|
||||
function getChartList() {
|
||||
if (props.title === "入库信息") {
|
||||
getBrandPercent().then((res) => {
|
||||
chartList.value = res.result.columnDatas.map((ele) => {
|
||||
chartList.value = res.result.columnDatas.map((ele,index) => {
|
||||
return {
|
||||
type: ele.name,
|
||||
value: ele.percentage * 100,
|
||||
id:index++,
|
||||
kg:ele.number + '箱',
|
||||
name: ele.name,
|
||||
value: (ele.percentage * 100).toFixed(2),
|
||||
msg:true,
|
||||
};
|
||||
});
|
||||
});
|
||||
} else {
|
||||
getOutBrandPercent().then((res) => {
|
||||
chartList.value = res.result.columnDatas.map((ele) => {
|
||||
chartList.value = res.result.columnDatas.map((ele,index) => {
|
||||
return {
|
||||
type: ele.name,
|
||||
value: ele.percentage * 100,
|
||||
id:index++,
|
||||
kg:ele.number + '箱',
|
||||
name: ele.name,
|
||||
value: (ele.percentage * 100).toFixed(2),
|
||||
msg:true,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
|
@ -259,8 +267,20 @@ function getAllBrandName(boolean) {
|
|||
});
|
||||
}
|
||||
}
|
||||
// 选择品牌
|
||||
function selectBrand(item,index){
|
||||
brandIndex.value = index
|
||||
params.brandName = item
|
||||
getBrandChart()
|
||||
}
|
||||
// 根据品牌名称获取chart图
|
||||
function getBrandChart() {
|
||||
function getBrandChart(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 === "入库信息") {
|
||||
getBrandTimeCount(params).then((res) => {
|
||||
drawBarChart(res.result);
|
||||
|
|
@ -295,15 +315,15 @@ function close() {
|
|||
}
|
||||
const value2 = ref("");
|
||||
const brandList = ref([
|
||||
"兰州(硬珍品)烟丝",
|
||||
"利群(长嘴)烟丝",
|
||||
"兰州(硬吉祥)烟丝",
|
||||
"兰州(硬珍品)烟丝",
|
||||
"利群(长嘴)烟丝",
|
||||
"兰州(硬吉祥)烟丝",
|
||||
"兰州(硬珍品)烟丝",
|
||||
"利群(长嘴)烟丝",
|
||||
"兰州(硬吉祥)烟丝",
|
||||
// "兰州(硬珍品)烟丝",
|
||||
// "利群(长嘴)烟丝",
|
||||
// "兰州(硬吉祥)烟丝",
|
||||
// "兰州(硬珍品)烟丝",
|
||||
// "利群(长嘴)烟丝",
|
||||
// "兰州(硬吉祥)烟丝",
|
||||
// "兰州(硬珍品)烟丝",
|
||||
// "利群(长嘴)烟丝",
|
||||
// "兰州(硬吉祥)烟丝",
|
||||
]);
|
||||
function drawBarChart(res) {
|
||||
let dom = document.querySelector("#barChart");
|
||||
|
|
@ -317,6 +337,9 @@ function drawBarChart(res) {
|
|||
right: "2%",
|
||||
top: "15%",
|
||||
},
|
||||
tooltip:{
|
||||
show:true
|
||||
},
|
||||
xAxis: {
|
||||
data: res.map((ele, index) => {
|
||||
return index + 1;
|
||||
|
|
@ -328,14 +351,14 @@ function drawBarChart(res) {
|
|||
},
|
||||
axisLabel: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
fontSize: '0.875rem',
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: "单位:kg",
|
||||
name: "单位:公斤",
|
||||
nameTextStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "1rem",
|
||||
fontSize: "0.875rem",
|
||||
padding: [0, 35, 10, 0],
|
||||
},
|
||||
axisLine: {
|
||||
|
|
@ -402,7 +425,11 @@ onMounted(() => {
|
|||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.num-select{
|
||||
background-image: url("@/assets/images/dialog/num-select.png") !important;
|
||||
}
|
||||
.swiper {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
transition: all linear 0.2s;
|
||||
|
|
@ -465,7 +492,7 @@ onMounted(() => {
|
|||
height: vh(818 - 60);
|
||||
box-sizing: border-box;
|
||||
&-chart {
|
||||
padding: vh(55) vw(88) 0 vw(88);
|
||||
padding: vh(40) vw(88) 0 vw(88);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
@ -481,13 +508,16 @@ onMounted(() => {
|
|||
.swiper-box {
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
// &-item:nth-child(1){
|
||||
// margin-left: vw(35);
|
||||
// }
|
||||
&-item {
|
||||
margin-right: vw(52);
|
||||
margin-right: vw(40);
|
||||
// width: vw(100);
|
||||
// height: vh(170);
|
||||
.chart {
|
||||
width: vw(110);
|
||||
height: vh(170);
|
||||
height: vh(190);
|
||||
}
|
||||
}
|
||||
&-item:nth-of-type(8n) {
|
||||
|
|
@ -565,10 +595,12 @@ onMounted(() => {
|
|||
.brand-item {
|
||||
width: vw(200);
|
||||
height: vh(36);
|
||||
font-size: 1rem;
|
||||
line-height: vh(36);
|
||||
margin: vh(2) 0;
|
||||
padding-left: vw(14);
|
||||
box-sizing: border-box;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
background-image: url("@/assets/images/dialog/down-default.png");
|
||||
}
|
||||
|
|
|
|||
23
src/main.js
23
src/main.js
|
|
@ -7,5 +7,28 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'
|
|||
import router from "./router/router.js"
|
||||
|
||||
|
||||
// // 动态调整根字体大小的函数
|
||||
const updateRootFontSize = () => {
|
||||
const baseSize = 1.5; // 基准字体大小
|
||||
// const minFontSize = 12; // 最小字体大小
|
||||
// const maxFontSize = 25; // 最大字体大小
|
||||
const designHeight = 1080; // 设计稿的宽度基准
|
||||
const clientHeight = document.documentElement.clientHeight; // 当前窗口的宽度
|
||||
const scale = clientHeight / designHeight; // 计算当前窗口宽度与设计稿宽度的比例
|
||||
let newSize = baseSize * scale * 12;
|
||||
console.log(newSize,'newSize');
|
||||
// 限制字体大小在最小和最大范围内
|
||||
// if (newSize < minFontSize) {
|
||||
// newSize = minFontSize;
|
||||
// } else if (newSize > maxFontSize) {
|
||||
// newSize = maxFontSize;
|
||||
// }
|
||||
// 设置根元素的字体大小
|
||||
document.documentElement.style.fontSize = `${newSize}px`;
|
||||
};
|
||||
// 监听窗口大小变化，并动态调整字体大小
|
||||
window.addEventListener('resize', updateRootFontSize);
|
||||
|
||||
// 初始化时立即设置一次字体大小
|
||||
updateRootFontSize();
|
||||
createApp(App).use(ElementPlus,{locale:zhCn}).use(router).mount('#app')
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import { createRouter, createWebHashHistory,createWebHistory} from 'vue-router'
|
||||
// import Login from '../view/Login.vue'
|
||||
|
||||
|
||||
import Layout from '@/views/home/components/layout.vue'
|
||||
const routes = [
|
||||
{
|
||||
path:'/',
|
||||
name:'',
|
||||
redirect:'/login',
|
||||
},
|
||||
{
|
||||
|
|
@ -17,6 +18,18 @@ const routes = [
|
|||
name:'home',
|
||||
component: () => import('@/views/home/index')
|
||||
}
|
||||
// {
|
||||
// path:'/',
|
||||
// redirect:'/login',
|
||||
// component:Layout,
|
||||
// children:[
|
||||
// {
|
||||
// path:'/login',
|
||||
// name:'login',
|
||||
// component: () => import('@/views/login')
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
#app,
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
user-select: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// 给时间补零
|
||||
function fillZero(str){
|
||||
function fillZero(str) {
|
||||
var realNum;
|
||||
if (str < 10) {
|
||||
realNum = '0' + str;
|
||||
|
|
@ -8,7 +8,7 @@ function fillZero(str){
|
|||
}
|
||||
return realNum;
|
||||
}
|
||||
export function getNowTime(isAll){
|
||||
export function getNowTime(isAll) {
|
||||
let now = new Date();
|
||||
let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
|
||||
let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
|
||||
|
|
@ -18,12 +18,21 @@ export function getNowTime(isAll){
|
|||
let second = now.getSeconds(); //获取当前秒数(0-59)
|
||||
let nowTime = ''
|
||||
//返回年月日时分秒
|
||||
if(isAll){
|
||||
nowTime = year + '.' + fillZero(month) + '.' + fillZero(today) + ' ' + fillZero(hour) + ':' + fillZero(minute) + ':' + fillZero(second)
|
||||
}else{//返回年月日
|
||||
nowTime = year + '.' + fillZero(month) + '.' + fillZero(today)
|
||||
if (isAll) {
|
||||
nowTime = year + '.' + fillZero(month) + '.' + fillZero(today) + ' ' + fillZero(hour) + ':' + fillZero(minute) + ':' + fillZero(second)
|
||||
} else {//返回年月日
|
||||
nowTime = year + '.' + fillZero(month) + '.' + fillZero(today)
|
||||
}
|
||||
return nowTime
|
||||
}
|
||||
|
||||
|
||||
// 自适应echart
|
||||
export function fontSize(res) {
|
||||
let clientWidth =
|
||||
window.innerWidth ||
|
||||
document.documentElement.clientWidth ||
|
||||
document.body.clientWidth;
|
||||
if (!clientWidth) return;
|
||||
let fontSize = 100 * (clientWidth / 1920);
|
||||
return res * fontSize;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<!-- 电池管理 -->
|
||||
<div class="el-overlay">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<div class="box-title">电池管理</div>
|
||||
<div class="box-btn" @click="close"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div
|
||||
class="box-content-item"
|
||||
v-for="(item, index) in list"
|
||||
:key="'d' + index"
|
||||
@click="listToggle(index)"
|
||||
>
|
||||
<img
|
||||
:src="listIndex === index ? item.select : item.default"
|
||||
alt=""
|
||||
srcset=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 电池管理 -->
|
||||
<batteryManagement @closeBattery="closeDialog" v-if="listIndex === 0" />
|
||||
<!-- 电池位监测 -->
|
||||
<onLineMonitoring @closeOnline="closeDialog" v-if="listIndex === 1" />
|
||||
</template>
|
||||
<script setup>
|
||||
import deviceInfo from "@/components/equipmentManagement/deviceInfo";
|
||||
import equipmentAnalysis from "@/components/equipmentManagement/equipmentAnalysis";
|
||||
import maintenance from "@/components/equipmentManagement/maintenance";
|
||||
import healthManagement from "@/components/equipmentManagement/healthManagement";
|
||||
import batteryManagement from "@/components/equipmentManagement/batteryManagement";
|
||||
import onLineMonitoring from "@/components/equipmentManagement/onLineMonitoring";
|
||||
import { ref } from "vue";
|
||||
import getPath from "@/utils/getPath";
|
||||
const emit = defineEmits(["closeDialog"]);
|
||||
const listIndex = ref(-1);
|
||||
// 设备管理
|
||||
const list = ref([
|
||||
{
|
||||
default: getPath.device5,
|
||||
select: getPath.device5Select,
|
||||
},
|
||||
{
|
||||
default: getPath.device6,
|
||||
select: getPath.device6Select,
|
||||
},
|
||||
]);
|
||||
function close(value) {
|
||||
emit("closeDialog", value);
|
||||
}
|
||||
function listToggle(index) {
|
||||
listIndex.value = index;
|
||||
}
|
||||
// 关闭弹窗的公共方法
|
||||
function closeDialog(e) {
|
||||
listIndex.value = e;
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import url("@/assets/scss/dialogCommon.scss");
|
||||
</style>
|
||||
|
|
@ -72,12 +72,12 @@ const list = ref([
|
|||
{
|
||||
default: getPath.dev6,
|
||||
select: getPath.dev6Select,
|
||||
title:'喂丝机出库统计'
|
||||
title:'出库统计'
|
||||
},
|
||||
{
|
||||
default: getPath.dev7,
|
||||
select: getPath.dev7Select,
|
||||
title:'装箱站入库统计'
|
||||
title:'入库统计'
|
||||
},
|
||||
]);
|
||||
|
||||
|
|
|
|||
|
|
@ -64,14 +64,14 @@ const list = ref([
|
|||
default: getPath.device4,
|
||||
select: getPath.device4Select,
|
||||
},
|
||||
{
|
||||
default: getPath.device5,
|
||||
select: getPath.device5Select,
|
||||
},
|
||||
{
|
||||
default: getPath.device6,
|
||||
select: getPath.device6Select,
|
||||
},
|
||||
// {
|
||||
// default: getPath.device5,
|
||||
// select: getPath.device5Select,
|
||||
// },
|
||||
// {
|
||||
// default: getPath.device6,
|
||||
// select: getPath.device6Select,
|
||||
// },
|
||||
]);
|
||||
function close(value) {
|
||||
emit("closeDialog", value);
|
||||
|
|
|
|||
|
|
@ -11,19 +11,31 @@
|
|||
<span>即时库存信息情况</span>
|
||||
</div>
|
||||
<div class="box-content-chart">
|
||||
<div class="pre"></div>
|
||||
<div
|
||||
class="box-content-chart-item"
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="chart">
|
||||
<echart :dataMap="item" />
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="pre" @click="prvePage"></div>
|
||||
<div class="swiper">
|
||||
<transition
|
||||
:name="btnName"
|
||||
v-for="(item, index) in Math.ceil(list.length / 5)"
|
||||
:key="item.id"
|
||||
>
|
||||
<div v-if="listIndex == index" style="display: flex;width: 100%;">
|
||||
<div
|
||||
class="box-content-chart-item"
|
||||
v-for="(item, index) in list.slice(
|
||||
index * 5,
|
||||
5 * (index + 1)
|
||||
)"
|
||||
:key="item.id"
|
||||
>
|
||||
<div class="chart">
|
||||
<echart :dataMap="item" />
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div class="next"></div>
|
||||
<div class="next" @click="nextPage"></div>
|
||||
</div>
|
||||
<div class="box-content-search">
|
||||
<div>
|
||||
|
|
@ -34,7 +46,7 @@
|
|||
placeholder="请输入搜索内容"
|
||||
:prefix-icon="Search"
|
||||
/>
|
||||
<el-select
|
||||
<!-- <el-select
|
||||
style="margin-left:1rem"
|
||||
v-model="tableParams.orderByLoc"
|
||||
class="m-2"
|
||||
|
|
@ -43,7 +55,7 @@
|
|||
>
|
||||
<el-option label="是" :value="true" />
|
||||
<el-option label="否" :value="false" />
|
||||
</el-select>
|
||||
</el-select> -->
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
|
|
@ -72,18 +84,18 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="box-content-table">
|
||||
<el-table :data="tableList" style="width: 100%">
|
||||
<el-table :data="tableList" @sort-change="sortHandle" style="width: 100%">
|
||||
<el-table-column
|
||||
type="index"
|
||||
label="序号"
|
||||
width="50"
|
||||
:index="indexMethod"
|
||||
width="80"
|
||||
/>
|
||||
<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="storeLoc" sortable="custom" label="当前存放位置" />
|
||||
<el-table-column prop="itemDesc" :show-overflow-tooltip="true" label="物料描述" />
|
||||
<el-table-column prop="batchNum" :show-overflow-tooltip="true" label="批次" />
|
||||
<el-table-column prop="inputTime" label="入库时间"/>
|
||||
<!-- <el-table-column prop="number" label="编号" /> -->
|
||||
<el-table-column prop="upWeight" label="上箱重量" />
|
||||
<el-table-column prop="downWeight" label="下箱重量" />
|
||||
|
|
@ -149,7 +161,25 @@ const list = ref([
|
|||
// value: 40,
|
||||
// },
|
||||
]);
|
||||
|
||||
const btnName = ref("");
|
||||
const listIndex = ref(0);
|
||||
function nextPage() {
|
||||
btnName.value = "right";
|
||||
if (listIndex.value == Math.ceil(list.value.length / 5) - 1) {
|
||||
listIndex.value = 0;
|
||||
} else {
|
||||
listIndex.value++;
|
||||
}
|
||||
}
|
||||
// 上一页
|
||||
function prvePage() {
|
||||
btnName.value = "left";
|
||||
if (listIndex.value == 0) {
|
||||
listIndex.value = Math.ceil(list.value.length / 5) - 1;
|
||||
} else {
|
||||
listIndex.value--;
|
||||
}
|
||||
}
|
||||
// 区域数量
|
||||
const areaNum = reactive({
|
||||
storeNum: 10,
|
||||
|
|
@ -159,50 +189,50 @@ const areaNum = reactive({
|
|||
});
|
||||
// table数据
|
||||
const tableList = ref([
|
||||
{
|
||||
id: 1,
|
||||
trayNumber: 201425,
|
||||
address: "1巷道2行16列",
|
||||
dsc: "兰州硬支",
|
||||
batch: "YZP2303018",
|
||||
number: "201452",
|
||||
downWeight: "158.75",
|
||||
inDate: "2023-03-09",
|
||||
upWeight: "156.5",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
trayNumber: 201425,
|
||||
address: "1巷道2行16列",
|
||||
dsc: "兰州硬支",
|
||||
batch: "YZP2303018",
|
||||
number: "201452",
|
||||
downWeight: "158.75",
|
||||
inDate: "2023-03-09",
|
||||
upWeight: "156.5",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
trayNumber: 201425,
|
||||
address: "1巷道2行16列",
|
||||
dsc: "兰州硬支",
|
||||
batch: "YZP2303018",
|
||||
number: "201452",
|
||||
downWeight: "158.75",
|
||||
inDate: "2023-03-09",
|
||||
upWeight: "156.5",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
trayNumber: 201425,
|
||||
address: "1巷道2行16列",
|
||||
dsc: "兰州硬支",
|
||||
batch: "YZP2303018",
|
||||
number: "201452",
|
||||
downWeight: "158.75",
|
||||
inDate: "2023-03-09",
|
||||
upWeight: "156.5",
|
||||
},
|
||||
// {
|
||||
// id: 1,
|
||||
// trayNumber: 201425,
|
||||
// address: "1巷道2行16列",
|
||||
// dsc: "兰州硬支",
|
||||
// batch: "YZP2303018",
|
||||
// number: "201452",
|
||||
// downWeight: "158.75",
|
||||
// inDate: "2023-03-09",
|
||||
// upWeight: "156.5",
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// trayNumber: 201425,
|
||||
// address: "1巷道2行16列",
|
||||
// dsc: "兰州硬支",
|
||||
// batch: "YZP2303018",
|
||||
// number: "201452",
|
||||
// downWeight: "158.75",
|
||||
// inDate: "2023-03-09",
|
||||
// upWeight: "156.5",
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// trayNumber: 201425,
|
||||
// address: "1巷道2行16列",
|
||||
// dsc: "兰州硬支",
|
||||
// batch: "YZP2303018",
|
||||
// number: "201452",
|
||||
// downWeight: "158.75",
|
||||
// inDate: "2023-03-09",
|
||||
// upWeight: "156.5",
|
||||
// },
|
||||
// {
|
||||
// id: 4,
|
||||
// trayNumber: 201425,
|
||||
// address: "1巷道2行16列",
|
||||
// dsc: "兰州硬支",
|
||||
// batch: "YZP2303018",
|
||||
// number: "201452",
|
||||
// downWeight: "158.75",
|
||||
// inDate: "2023-03-09",
|
||||
// upWeight: "156.5",
|
||||
// },
|
||||
]);
|
||||
function close() {
|
||||
emit("closeBrand", false);
|
||||
|
|
@ -211,7 +241,7 @@ function close() {
|
|||
const tableTotal = ref(0);
|
||||
const tableParams = reactive({
|
||||
index: 1,
|
||||
size: 4,
|
||||
size: 10,
|
||||
name: "",
|
||||
orderByLoc: false,
|
||||
});
|
||||
|
|
@ -229,14 +259,23 @@ function indexMethod(index) {
|
|||
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,
|
||||
});
|
||||
}
|
||||
// for (let key in res.result[1]) {
|
||||
// list.value.push({
|
||||
// name: key,
|
||||
// kg: (res.result[1][key] * res.result[0]).toFixed(2) + "kg",
|
||||
// id: id.value++,
|
||||
// value: res.result[1][key] * 100,
|
||||
// });
|
||||
// }
|
||||
list.value = res.result.map((el, index) => {
|
||||
return {
|
||||
name: el.name,
|
||||
kg: el.stockNum + "箱",
|
||||
value: el.weightPercent,
|
||||
id: index,
|
||||
};
|
||||
});
|
||||
|
||||
console.log(list.value);
|
||||
});
|
||||
}
|
||||
|
|
@ -261,14 +300,25 @@ onMounted(() => {
|
|||
// 获取即时库存table数据
|
||||
getTableList();
|
||||
});
|
||||
|
||||
function sortHandle(event){
|
||||
tableParams.orderByLoc = event.order == 'ascending'
|
||||
getTableList()
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.swiper {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
transition: all linear 0.2s;
|
||||
width: 100%;
|
||||
}
|
||||
.pre,
|
||||
.next {
|
||||
width: vw(36);
|
||||
height: vh(36);
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
top: 30%;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -282,14 +332,14 @@ onMounted(() => {
|
|||
}
|
||||
.box {
|
||||
width: vw(1380);
|
||||
height: vh(716);
|
||||
height: vh(818);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
margin: auto;
|
||||
background-image: url("@/assets/images/dialog/device-dialog1.png");
|
||||
background-image: url("@/assets/images/dialog/device-dialog2.png");
|
||||
background-size: 100% 100%;
|
||||
&-header {
|
||||
width: 100%;
|
||||
|
|
@ -321,32 +371,42 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
&-table {
|
||||
height: vh(245);
|
||||
height: vh(407);
|
||||
}
|
||||
&-chart {
|
||||
padding: 0 vw(79);
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: vh(224);
|
||||
height: vh(190);
|
||||
&-item:nth-child(1){
|
||||
margin-left: vw(25);
|
||||
}
|
||||
&-item {
|
||||
// width: vw(120);
|
||||
display: flex;
|
||||
height: vh(224);
|
||||
height: vh(190);
|
||||
.chart {
|
||||
width: vw(120);
|
||||
height: vh(224);
|
||||
width: vw(110);
|
||||
height: vh(190);
|
||||
position: relative;
|
||||
}
|
||||
.line {
|
||||
width: vw(89);
|
||||
height: vh(12);
|
||||
margin: 0 vw(29);
|
||||
margin: 0 vw(28);
|
||||
position: relative;
|
||||
top: 40%;
|
||||
background-image: url("@/assets/images/dialog/line.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
&-item:nth-child(6n) .line {
|
||||
|
||||
// &-item:nth-child(6n) .line {
|
||||
// width: 0;
|
||||
// margin: 0;
|
||||
// height: 0;
|
||||
// }
|
||||
&-item:last-of-type .line {
|
||||
width: 0;
|
||||
margin: 0;
|
||||
height: 0;
|
||||
|
|
@ -355,8 +415,9 @@ onMounted(() => {
|
|||
&-search {
|
||||
margin-bottom: vh(12);
|
||||
display: flex;
|
||||
font-size: 1rem;
|
||||
justify-content: space-between;
|
||||
margin-top: vh(28);
|
||||
// margin-top: vh(28);
|
||||
ul {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -419,7 +480,7 @@ onMounted(() => {
|
|||
}
|
||||
:deep(.el-table .cell) {
|
||||
height: 100%;
|
||||
line-height: vh(48);
|
||||
line-height: vh(36) !important;
|
||||
}
|
||||
:deep(.el-table tr),
|
||||
:deep(.el-table),
|
||||
|
|
@ -428,7 +489,7 @@ onMounted(() => {
|
|||
background-color: transparent;
|
||||
}
|
||||
:deep(.el-table__row) {
|
||||
height: vh(48);
|
||||
height: vh(36) !important;
|
||||
border: 1px solid rgba(144, 218, 255, 1) !important;
|
||||
}
|
||||
:deep(.el-table) {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="box-content" v-if="props.title === '入库工单'">
|
||||
<div
|
||||
class="box-content-item in"
|
||||
v-for="(item, index) in props.data"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
>
|
||||
<div class="in-left">
|
||||
|
|
@ -20,18 +20,32 @@
|
|||
</div>
|
||||
<div class="in-left-border">
|
||||
<span class="name">预计装箱总数</span>
|
||||
<span>{{ item.planBoxQuantity }}</span>
|
||||
<span>{{ item.planBoxQuantity }}箱</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="in-right">
|
||||
<ul>
|
||||
<li>
|
||||
<span class="name">工单号</span>
|
||||
<span>{{ item.orderNum }}</span>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="item.orderNum"
|
||||
placement="top-start"
|
||||
>
|
||||
<span>{{ item.orderNum }}</span>
|
||||
</el-tooltip>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">批次号</span>
|
||||
<span>{{ item.batch }}</span>
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="dark"
|
||||
:content="item.batch"
|
||||
placement="top-start"
|
||||
>
|
||||
<span>{{ item.batch }}</span>
|
||||
</el-tooltip>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">品牌</span>
|
||||
|
|
@ -39,27 +53,28 @@
|
|||
</li>
|
||||
<li>
|
||||
<span class="name">计划量</span>
|
||||
<span>{{ item.planWeight }}</span>
|
||||
<span>{{ item.planWeight }}公斤</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<span class="name">已装箱数</span>
|
||||
<span>{{ item.inNum }}箱</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">工单开始时间</span>
|
||||
<span class="name">剩余箱数</span>
|
||||
<span>{{getResult(item)}}箱</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">开始时间</span>
|
||||
<span>{{ item.creatTime }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">预计完成时间</span>
|
||||
<span>{{ item.planFinishTime }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">已装箱重量</span>
|
||||
<span>{{ item.boxedWeight }}kg</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">已装箱数</span>
|
||||
<span>{{ item.boxedNumber }}</span>
|
||||
<span class="name">预计结束时间</span>
|
||||
<span>{{ item.planFinishTime}}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">状态</span>
|
||||
<span>{{ item.status==='Doing'?'执行中':'已完成' }}</span>
|
||||
<span>{{ item.status === "Doing" ? "执行中" : "已完成" }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -69,7 +84,7 @@
|
|||
<div class="box-content" v-else>
|
||||
<div
|
||||
class="box-content-item out"
|
||||
v-for="(item, index) in props.data"
|
||||
v-for="(item, index) in outList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="out-left">
|
||||
|
|
@ -88,19 +103,20 @@
|
|||
<span class="name">品牌</span>
|
||||
<span>{{ item.itemDesc }}</span>
|
||||
</li>
|
||||
|
||||
|
||||
<li>
|
||||
<span class="name">工单开始时间</span>
|
||||
<span>{{ item.creatTime }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">剩余箱数</span>
|
||||
<span>{{ item.remainCount }}</span>
|
||||
<span>{{ item.leftNum }}箱</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="name">剩余投料量</span>
|
||||
<span>{{ item.remainWeight }}kg</span>
|
||||
<span>{{ item.remainWeight }}公斤</span>
|
||||
</li>
|
||||
<li style="opacity:0"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -109,100 +125,118 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, defineProps } from "vue";
|
||||
import { ref, defineProps,onMounted } from "vue";
|
||||
import getPath from "@/utils/getPath";
|
||||
import {getConOutOrder,getConInOrder} from '@/api/home'
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
|
||||
|
||||
data:Array
|
||||
data: Array,
|
||||
});
|
||||
const emit = defineEmits(["close"]);
|
||||
const list = ref([
|
||||
{
|
||||
num: "1号",
|
||||
line: "入库线",
|
||||
boxTotal: 62,
|
||||
workerNumber: "YZP2303022",
|
||||
batchNumber: "YZP2303022Y5RKA",
|
||||
brand: "兰州（硬珍品）烟丝",
|
||||
invName: "9737.37kg",
|
||||
stratTime: "2023-03-10 02:01",
|
||||
endTime: "2023-03-10 03:52",
|
||||
packagedWeight: "9686.5kg",
|
||||
packingQuantity: "62",
|
||||
status: "已完成",
|
||||
},
|
||||
{
|
||||
num: "1号",
|
||||
line: "入库线",
|
||||
boxTotal: 62,
|
||||
workerNumber: "YZP2303022",
|
||||
batchNumber: "YZP2303022Y5RKA",
|
||||
brand: "兰州（硬珍品）烟丝",
|
||||
invName: "9737.37kg",
|
||||
stratTime: "2023-03-10 02:01",
|
||||
endTime: "2023-03-10 03:52",
|
||||
packagedWeight: "9686.5kg",
|
||||
packingQuantity: "62",
|
||||
status: "已完成",
|
||||
},
|
||||
{
|
||||
num: "1号",
|
||||
line: "入库线",
|
||||
boxTotal: 62,
|
||||
workerNumber: "YZP2303022",
|
||||
batchNumber: "YZP2303022Y5RKA",
|
||||
brand: "兰州（硬珍品）烟丝",
|
||||
invName: "9737.37kg",
|
||||
stratTime: "2023-03-10 02:01",
|
||||
endTime: "2023-03-10 03:52",
|
||||
packagedWeight: "9686.5kg",
|
||||
packingQuantity: "62",
|
||||
status: "已完成",
|
||||
},
|
||||
// {
|
||||
// num: "1号",
|
||||
// line: "入库线",
|
||||
// boxTotal: 62,
|
||||
// workerNumber: "YZP2303022",
|
||||
// batchNumber: "YZP2303022Y5RKA",
|
||||
// brand: "兰州（硬珍品）烟丝",
|
||||
// invName: "9737.37kg",
|
||||
// stratTime: "2023-03-10 02:01",
|
||||
// endTime: "2023-03-10 03:52",
|
||||
// packagedWeight: "9686.5kg",
|
||||
// packingQuantity: "62",
|
||||
// status: "已完成",
|
||||
// },
|
||||
// {
|
||||
// num: "1号",
|
||||
// line: "入库线",
|
||||
// boxTotal: 62,
|
||||
// workerNumber: "YZP2303022",
|
||||
// batchNumber: "YZP2303022Y5RKA",
|
||||
// brand: "兰州（硬珍品）烟丝",
|
||||
// invName: "9737.37kg",
|
||||
// stratTime: "2023-03-10 02:01",
|
||||
// endTime: "2023-03-10 03:52",
|
||||
// packagedWeight: "9686.5kg",
|
||||
// packingQuantity: "62",
|
||||
// status: "已完成",
|
||||
// },
|
||||
// {
|
||||
// num: "1号",
|
||||
// line: "入库线",
|
||||
// boxTotal: 62,
|
||||
// workerNumber: "YZP2303022",
|
||||
// batchNumber: "YZP2303022Y5RKA",
|
||||
// brand: "兰州（硬珍品）烟丝",
|
||||
// invName: "9737.37kg",
|
||||
// stratTime: "2023-03-10 02:01",
|
||||
// endTime: "2023-03-10 03:52",
|
||||
// packagedWeight: "9686.5kg",
|
||||
// packingQuantity: "62",
|
||||
// status: "已完成",
|
||||
// },
|
||||
]);
|
||||
const outList = ref([
|
||||
{
|
||||
num: "S01",
|
||||
line: "喂丝机",
|
||||
workerNumber: "YZP2303022",
|
||||
brand: "兰州（硬珍品）烟丝",
|
||||
invName: "22494.37kg",
|
||||
startTime: "2023-03-10 02:01",
|
||||
realityInventory: "4372.25",
|
||||
},
|
||||
{
|
||||
num: "S01",
|
||||
line: "喂丝机",
|
||||
workerNumber: "YZP2303022",
|
||||
brand: "兰州（硬珍品）烟丝",
|
||||
invName: "22494.37kg",
|
||||
startTime: "2023-03-10 02:01",
|
||||
realityInventory: "4372.25",
|
||||
},
|
||||
{
|
||||
num: "S01",
|
||||
line: "喂丝机",
|
||||
workerNumber: "YZP2303022",
|
||||
brand: "兰州（硬珍品）烟丝",
|
||||
invName: "22494.37kg",
|
||||
startTime: "2023-03-10 02:01",
|
||||
realityInventory: "4372.25",
|
||||
},
|
||||
{
|
||||
num: "S01",
|
||||
line: "喂丝机",
|
||||
workerNumber: "YZP2303022",
|
||||
brand: "兰州（硬珍品）烟丝",
|
||||
invName: "22494.37kg",
|
||||
startTime: "2023-03-10 02:01",
|
||||
realityInventory: "4372.25",
|
||||
},
|
||||
// {
|
||||
// num: "S01",
|
||||
// line: "喂丝机",
|
||||
// workerNumber: "YZP2303022",
|
||||
// brand: "兰州（硬珍品）烟丝",
|
||||
// invName: "22494.37kg",
|
||||
// startTime: "2023-03-10 02:01",
|
||||
// realityInventory: "4372.25",
|
||||
// },
|
||||
// {
|
||||
// num: "S01",
|
||||
// line: "喂丝机",
|
||||
// workerNumber: "YZP2303022",
|
||||
// brand: "兰州（硬珍品）烟丝",
|
||||
// invName: "22494.37kg",
|
||||
// startTime: "2023-03-10 02:01",
|
||||
// realityInventory: "4372.25",
|
||||
// },
|
||||
// {
|
||||
// num: "S01",
|
||||
// line: "喂丝机",
|
||||
// workerNumber: "YZP2303022",
|
||||
// brand: "兰州（硬珍品）烟丝",
|
||||
// invName: "22494.37kg",
|
||||
// startTime: "2023-03-10 02:01",
|
||||
// realityInventory: "4372.25",
|
||||
// },
|
||||
// {
|
||||
// num: "S01",
|
||||
// line: "喂丝机",
|
||||
// workerNumber: "YZP2303022",
|
||||
// brand: "兰州（硬珍品）烟丝",
|
||||
// invName: "22494.37kg",
|
||||
// startTime: "2023-03-10 02:01",
|
||||
// realityInventory: "4372.25",
|
||||
// },
|
||||
]);
|
||||
function close() {
|
||||
emit("close", false);
|
||||
}
|
||||
// 获取出入库工单详情
|
||||
function getOrderDetail(){
|
||||
if(props.title=='入库工单'){
|
||||
getConInOrder().then(res=>{
|
||||
list.value = res.result
|
||||
})
|
||||
}else{
|
||||
getConOutOrder().then(res=>{
|
||||
outList.value = res.result
|
||||
})
|
||||
}
|
||||
}
|
||||
function getResult(item){
|
||||
return item.planBoxQuantity - item.inNum
|
||||
}
|
||||
onMounted(()=>{
|
||||
getOrderDetail()
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
|
|
@ -247,6 +281,7 @@ function close() {
|
|||
// border-radius: 8px; /* 滑块的圆角 */
|
||||
}
|
||||
&-content {
|
||||
font-size: 1rem;
|
||||
padding: vh(20) vw(20);
|
||||
height: vh(636 - 60);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -301,14 +336,15 @@ function close() {
|
|||
height: 100%;
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
width: vw(232);
|
||||
margin-right: vw(20);
|
||||
// margin-right: vw(20);
|
||||
padding-left: vw(32);
|
||||
box-sizing: border-box;
|
||||
height: vh(64);
|
||||
background: url("@/assets/images/dialog/inOutBound/border.png");
|
||||
background: url("@/assets/images/dialog/border.png");
|
||||
background-size: 100% 100%;
|
||||
.name {
|
||||
display: block;
|
||||
|
|
@ -316,6 +352,13 @@ function close() {
|
|||
font-size: 0.875rem;
|
||||
margin-bottom: vh(10);
|
||||
}
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
max-width: vw(170);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
li:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="el-overlay">
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<div class="box-title">消息提醒</div>
|
||||
<div class="box-title">故障提醒</div>
|
||||
<div class="box-btn" @click="close"></div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
|
|
@ -244,7 +244,7 @@ const editData = ref({});
|
|||
// let {radio,value} = toRefs(editData)
|
||||
function rowClick(row) {
|
||||
editData.value = row;
|
||||
dialogBoxShow.value = true;
|
||||
// dialogBoxShow.value = true;
|
||||
}
|
||||
function closeDialogBox() {
|
||||
dialogBoxShow.value = false;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div class="header">
|
||||
<div class="header-date">
|
||||
{{ nowDate }}
|
||||
</div>
|
||||
<div class="header-title">数字孪生三维可视化系统</div>
|
||||
<div class="header-weather"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { getNowTime } from "@/utils/common";
|
||||
import { onMounted, ref } from "vue";
|
||||
import cloudy from "@/assets/images/login/cloudy.png";
|
||||
const nowDate = ref("");
|
||||
onMounted(() => {
|
||||
setInterval(() => {
|
||||
nowDate.value = getNowTime(true);
|
||||
}, 1000);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
background-image: url("@/assets/images/header.png");
|
||||
width: 100%;
|
||||
height: vh(160);
|
||||
background-size: 100% 100%;
|
||||
padding: 0 2.5rem;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
z-index: 88;
|
||||
top: 0;
|
||||
left: 0;
|
||||
&-title {
|
||||
margin-top: vh(8);
|
||||
width: vw(838);
|
||||
text-align: center;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
font-size: 2.625rem;
|
||||
font-family: "pangmen";
|
||||
float: left;
|
||||
letter-spacing: 0.5rem;
|
||||
background-image: -webkit-linear-gradient(
|
||||
270deg,
|
||||
#ffffff 0%,
|
||||
#ffffff 37%,
|
||||
#11abea 100%
|
||||
);
|
||||
}
|
||||
&-date,
|
||||
&-weather {
|
||||
font-size: 1rem;
|
||||
width: vw(500);
|
||||
float: left;
|
||||
margin-top: vh(21);
|
||||
}
|
||||
&-weather {
|
||||
text-align: right;
|
||||
span {
|
||||
vertical-align: top;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<Nav />
|
||||
<div class="unity">
|
||||
<!-- <iframe src="model/index.html" frameborder="0"></iframe> -->
|
||||
<iframe src="model/index.html" frameborder="0"></iframe>
|
||||
</div>
|
||||
<div class="home">
|
||||
<div class="home-left">
|
||||
|
|
@ -28,20 +29,28 @@
|
|||
<span class="home-title-more" @click="brandShow = true"> </span>
|
||||
</div>
|
||||
<div class="home-left-brand" id="brand">
|
||||
<div v-for="(item,index) in brandList" :key="'brand' + index" class="item">
|
||||
<div
|
||||
v-for="(item, index) in brandList"
|
||||
:key="'brand' + index"
|
||||
class="item"
|
||||
>
|
||||
<div class="home-left-brand-title">
|
||||
<span>{{item.name}}</span><span class="pct">{{item.pct*100}}%</span>
|
||||
<span>{{ item.name }}</span
|
||||
><span class="pct"
|
||||
>{{ item.stockNum }}<span class="kg">箱</span></span
|
||||
>
|
||||
</div>
|
||||
<div class="home-left-brand-progress">
|
||||
<div class="home-left-brand-bg" :style="'width:'+item.pct*100+'%'">
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="home-left-brand-bg"
|
||||
:style="'width:' + item.weightPercent + '%'"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消息提醒 -->
|
||||
<!-- 故障提醒 -->
|
||||
<div class="home-title">
|
||||
<span class="home-title-font"> 消息提醒 </span>
|
||||
<span class="home-title-font"> 故障提醒 </span>
|
||||
<span class="home-title-more" @click="openMsg"> </span>
|
||||
</div>
|
||||
<div class="home-left-messageReminder">
|
||||
|
|
@ -104,9 +113,10 @@
|
|||
</div>
|
||||
<div class="right-plate">
|
||||
<p class="name">{{ item.itemDesc }}</p>
|
||||
<p class="id">{{ item.currentBatch }}</p>
|
||||
<!-- <p class="id">{{ item.currentBatch }}</p> -->
|
||||
<p class="start-time">
|
||||
开始时间：<span>{{ item.creatTime }}</span>
|
||||
<!-- 开始时间:<span> {{ item.creatTime }}</span> -->
|
||||
剩余箱数：<span>{{ item.leftNum }}箱</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -127,24 +137,28 @@
|
|||
<div class="home-right-inboundWorkOrder">
|
||||
<div class="home-right-inboundWorkOrder-content">
|
||||
<div
|
||||
class="home-right-inboundWorkOrder-box"
|
||||
v-for="(item, index) in inboundWorkOrder"
|
||||
:key="'out' + index"
|
||||
>
|
||||
<div class="left-plate">
|
||||
<img :src="item.pic" alt="" />
|
||||
<p class="name">装箱站{{ item.packStation }}号</p>
|
||||
</div>
|
||||
<div class="right-plate">
|
||||
<p class="name">{{ item.itemDesc }}</p>
|
||||
<p class="id">{{ item.batch }}</p>
|
||||
<p class="start-time">
|
||||
开始时间：<span>{{ item.creatTime }}</span>
|
||||
</p>
|
||||
class="home-right-inboundWorkOrder-box"
|
||||
v-for="(item, index) in inboundWorkOrder"
|
||||
:key="'out' + index"
|
||||
>
|
||||
<div class="left-plate">
|
||||
<img :src="item.pic" alt="" />
|
||||
<p class="name">装箱站1号</p>
|
||||
</div>
|
||||
<div class="right-plate">
|
||||
<p class="name">{{ item.itemDesc }}</p>
|
||||
<p class="start-time">
|
||||
计划重量：<span>{{ item.planWeight }}公斤</span>
|
||||
</p>
|
||||
<p class="start-time">
|
||||
入库重量：<span>{{ item.inWeight }}公斤</span>
|
||||
</p>
|
||||
<p class="start-time">
|
||||
入库箱数：<span>{{ item.inNum }}箱</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-bottom">
|
||||
|
|
@ -163,7 +177,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消息提醒弹窗 -->
|
||||
<!-- 故障提醒弹窗 -->
|
||||
<messageDialog v-if="isOpen" @closeMsg="closeMsg" />
|
||||
<!-- 各品牌库存弹窗 -->
|
||||
<brand v-if="brandShow" @closeBrand="closeBrand" />
|
||||
|
|
@ -180,13 +194,17 @@
|
|||
<equipmentManagement v-if="asideListIndex === 1" @closeDialog="closeDialog" />
|
||||
<!-- 生产信息弹窗 -->
|
||||
<devData v-if="asideListIndex === 0" @closeDialog="closeDialog" />
|
||||
<!-- 电池管理弹窗 -->
|
||||
<batteryManagement v-if="asideListIndex === 2" @closeDialog="closeDialog" />
|
||||
<!-- 运维指导弹窗 -->
|
||||
<OPEX v-if="asideListIndex === 2" @closeDialog="closeDialog" />
|
||||
<OPEX v-if="asideListIndex === 3" @closeDialog="closeDialog" />
|
||||
</template>
|
||||
<script setup>
|
||||
import Nav from "@/views/home/components/layout.vue";
|
||||
import devData from "./components/aside/devData"; //生产信息
|
||||
import equipmentManagement from "./components/aside/equipmentManagement"; // 设备管理
|
||||
import OPEX from "./components/aside/OPEX";
|
||||
import batteryManagement from "./components/aside/batteryManagement";
|
||||
import OPEX from "./components/aside/OPEX"; //运维管理
|
||||
|
||||
import brand from "./components/homeDialog/brand"; //各品牌库存管理
|
||||
import messageDialog from "./components/homeDialog/messageDialog"; //消息提醒
|
||||
|
|
@ -204,19 +222,17 @@ import {
|
|||
getInOrder,
|
||||
getOutOrder,
|
||||
getLocInfo,
|
||||
|
||||
} from "@/api/home";
|
||||
import { fontSize } from "@/utils/common";
|
||||
// 设备状态列表
|
||||
const deviceList = ref([
|
||||
{
|
||||
deviceStatus: "运行设备",
|
||||
deviceNum: 1889,
|
||||
deviceImg: getPath.operatingEquipment1,
|
||||
color: "color:rgba(164, 255, 236, 1)",
|
||||
},
|
||||
{
|
||||
deviceStatus: "设备故障",
|
||||
deviceNum: 26,
|
||||
deviceImg: getPath.equipmentFailure1,
|
||||
color: "color:rgba(255, 244, 166, 1)",
|
||||
},
|
||||
|
|
@ -293,7 +309,7 @@ function darwBrandChart(data) {
|
|||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "14",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
formatter: function (value, index) {
|
||||
return "{a|" + value + "}";
|
||||
|
|
@ -302,7 +318,7 @@ function darwBrandChart(data) {
|
|||
a: {
|
||||
width: 45,
|
||||
padding: [0, 0, 3, 0],
|
||||
fontSize: "14",
|
||||
fontSize: "0.875rem",
|
||||
// backgroundColor: {
|
||||
// image: getImageUrl("../../assets/images/rank-bg.png"),
|
||||
// },
|
||||
|
|
@ -410,23 +426,34 @@ const searchData = ref();
|
|||
// 库存消息的echarts
|
||||
function drawInventoryNewsEcahrt(result) {
|
||||
let myChart = echarts.init(document.getElementById("inventoryNews"));
|
||||
console.log(result,'xxxxxxxxxxx');
|
||||
var scaleData = [
|
||||
{
|
||||
name: "货位",
|
||||
value: 1174,
|
||||
radius1: ['51%', '53%'],
|
||||
},
|
||||
{
|
||||
name: "实箱",
|
||||
value: 1101,
|
||||
radius1: ["59%", "60%"],
|
||||
},
|
||||
{
|
||||
name: "空箱",
|
||||
value: 68,
|
||||
radius1: ["67%", "68%"],
|
||||
},
|
||||
// {
|
||||
// name: "货位",
|
||||
// value: 1174,
|
||||
// radius1: ["51%", "53%"],
|
||||
// },
|
||||
// {
|
||||
// name: "实箱",
|
||||
// value: 1101,
|
||||
// radius1: ["59%", "60%"],
|
||||
// },
|
||||
// {
|
||||
// name: "空箱",
|
||||
// value: 68,
|
||||
// radius1: ["67%", "68%"],
|
||||
// },
|
||||
];
|
||||
let index = 0
|
||||
for(let key in result){
|
||||
scaleData.push({
|
||||
name:key,
|
||||
value:result[key],
|
||||
radius1:[51+index*8 + '%' + '', 53+index*8 + '%' + '']
|
||||
})
|
||||
index ++
|
||||
}
|
||||
console.log(scaleData,'xxxxxxxxx');
|
||||
// 数据处理
|
||||
scaleData.forEach((el) => {
|
||||
for (let key in result) {
|
||||
|
|
@ -497,8 +524,8 @@ function drawInventoryNewsEcahrt(result) {
|
|||
type: "image",
|
||||
style: {
|
||||
image: getPath.homeIcon, // 图片地址
|
||||
width: 50,
|
||||
height: 50,
|
||||
width: fontSize(0.5),
|
||||
height: fontSize(0.5),
|
||||
},
|
||||
// left: '18.5%',
|
||||
left: "17.5%", // 【主要代码1】
|
||||
|
|
@ -513,29 +540,28 @@ function drawInventoryNewsEcahrt(result) {
|
|||
legend: {
|
||||
icon: "circle",
|
||||
orient: "vertical",
|
||||
x: "58%",
|
||||
x: "60%",
|
||||
y: "center",
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 40,
|
||||
itemWidth: fontSize(0.1),
|
||||
itemHeight: fontSize(0.1),
|
||||
itemGap: fontSize(0.2),
|
||||
data: scaleData.map((el) => {
|
||||
return el.name;
|
||||
}),
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "14",
|
||||
fontSize: "1rem",
|
||||
rich: {
|
||||
name: {
|
||||
color: "#fff",
|
||||
|
||||
fontSize: "14",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
val: {
|
||||
fontSize: "16",
|
||||
fontSize: ".875rem",
|
||||
textAlign: "right",
|
||||
width: "40",
|
||||
padding: [0, 0, 0, 50],
|
||||
// width: "40",
|
||||
padding: [0, 0, 0, 10],
|
||||
color: color[i],
|
||||
},
|
||||
},
|
||||
|
|
@ -559,55 +585,114 @@ function drawInventoryNewsEcahrt(result) {
|
|||
// 添加 resize 事件处理程序
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||
myChart.setOption({
|
||||
graphic: {
|
||||
/**
|
||||
* 【主要代码】图形中心展示图片
|
||||
*/
|
||||
elements: [
|
||||
{
|
||||
type: "image",
|
||||
style: {
|
||||
image: getPath.homeIcon, // 图片地址
|
||||
width: fontSize(0.5),
|
||||
height: fontSize(0.5),
|
||||
},
|
||||
// left: '18.5%',
|
||||
left: "17.5%", // 【主要代码1】
|
||||
top: "center",
|
||||
},
|
||||
],
|
||||
},
|
||||
legend: {
|
||||
icon: "circle",
|
||||
orient: "vertical",
|
||||
x: "60%",
|
||||
y: "center",
|
||||
itemWidth: fontSize(0.1),
|
||||
itemHeight: fontSize(0.1),
|
||||
itemGap: fontSize(0.2),
|
||||
data: scaleData.map((el) => {
|
||||
return el.name;
|
||||
}),
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: "0.875rem",
|
||||
rich: {
|
||||
name: {
|
||||
color: "#fff",
|
||||
fontSize: "0.875rem",
|
||||
},
|
||||
val: {
|
||||
fontSize: ".875rem",
|
||||
textAlign: "right",
|
||||
// width: "40",
|
||||
|
||||
color: color[i],
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: function (name) {
|
||||
let total = 0;
|
||||
for (var i = 0; i < scaleData.length; i++) {
|
||||
if (scaleData[i].name === name) {
|
||||
total = scaleData[i].value;
|
||||
}
|
||||
}
|
||||
return `{name|${name}} {val|${total}}`;
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
// 出库工单
|
||||
const outboundWorkOrder = ref([
|
||||
{
|
||||
name: "利群（长嘴）烟丝",
|
||||
id: "JB17225LQ（CZ）02",
|
||||
startTime: "08:21",
|
||||
pic: getPath.outDevice,
|
||||
picName: "S08喂丝机",
|
||||
},
|
||||
{
|
||||
name: "利群（长嘴）烟丝",
|
||||
id: "JB17225LQ（CZ）02",
|
||||
startTime: "08:21",
|
||||
pic: getPath.outDevice,
|
||||
picName: "S08喂丝机",
|
||||
},
|
||||
{
|
||||
name: "利群（长嘴）烟丝",
|
||||
id: "JB17225LQ（CZ）02",
|
||||
startTime: "08:21",
|
||||
pic: getPath.outDevice,
|
||||
picName: "S08喂丝机",
|
||||
},
|
||||
// {
|
||||
// name: "利群（长嘴）烟丝",
|
||||
// id: "JB17225LQ（CZ）02",
|
||||
// startTime: "08:21",
|
||||
// pic: getPath.outDevice,
|
||||
// picName: "S08喂丝机",
|
||||
// },
|
||||
// {
|
||||
// name: "利群（长嘴）烟丝",
|
||||
// id: "JB17225LQ（CZ）02",
|
||||
// startTime: "08:21",
|
||||
// pic: getPath.outDevice,
|
||||
// picName: "S08喂丝机",
|
||||
// },
|
||||
// {
|
||||
// name: "利群（长嘴）烟丝",
|
||||
// id: "JB17225LQ（CZ）02",
|
||||
// startTime: "08:21",
|
||||
// pic: getPath.outDevice,
|
||||
// picName: "S08喂丝机",
|
||||
// },
|
||||
]);
|
||||
// 入库工单
|
||||
const inboundWorkOrder = ref([
|
||||
{
|
||||
name: "利群（长嘴）烟丝",
|
||||
id: "JB17225LQ（CZ）02",
|
||||
startTime: "08:21",
|
||||
pic: getPath.inDevice,
|
||||
picName: "S08喂丝机",
|
||||
},
|
||||
{
|
||||
name: "利群（长嘴）烟丝",
|
||||
id: "JB17225LQ（CZ）02",
|
||||
startTime: "08:21",
|
||||
pic: getPath.inDevice,
|
||||
picName: "S08喂丝机",
|
||||
},
|
||||
{
|
||||
name: "利群（长嘴）烟丝",
|
||||
id: "JB17225LQ（CZ）02",
|
||||
startTime: "08:21",
|
||||
pic: getPath.inDevice,
|
||||
picName: "S08喂丝机",
|
||||
},
|
||||
// {
|
||||
// name: "利群（长嘴）烟丝",
|
||||
// id: "JB17225LQ（CZ）02",
|
||||
// startTime: "08:21",
|
||||
// pic: getPath.inDevice,
|
||||
// picName: "S08喂丝机",
|
||||
// },
|
||||
// {
|
||||
// name: "利群（长嘴）烟丝",
|
||||
// id: "JB17225LQ（CZ）02",
|
||||
// startTime: "08:21",
|
||||
// pic: getPath.inDevice,
|
||||
// picName: "S08喂丝机",
|
||||
// },
|
||||
// {
|
||||
// name: "利群（长嘴）烟丝",
|
||||
// id: "JB17225LQ（CZ）02",
|
||||
// startTime: "08:21",
|
||||
// pic: getPath.inDevice,
|
||||
// picName: "S08喂丝机",
|
||||
// },
|
||||
]);
|
||||
|
||||
const asideList = ref([
|
||||
|
|
@ -619,6 +704,10 @@ const asideList = ref([
|
|||
default: getPath.deviceDefault,
|
||||
select: getPath.deviceSelect,
|
||||
},
|
||||
{
|
||||
default: getPath.batteryManagementDefault,
|
||||
select: getPath.batteryManagementSelect,
|
||||
},
|
||||
{
|
||||
default: getPath.operationDefault,
|
||||
select: getPath.operationSelect,
|
||||
|
|
@ -678,23 +767,24 @@ function getDeviceStatus() {
|
|||
});
|
||||
});
|
||||
}
|
||||
const brandList = ref([])
|
||||
const brandList = ref([]);
|
||||
// 各品牌库存情况接口方法
|
||||
function getBrandData() {
|
||||
getInventoryInfo().then((res) => {
|
||||
// darwBrandChart(res.result);
|
||||
for(let key in res.result[1]){
|
||||
brandList.value.push({
|
||||
pct:res.result[1][key],
|
||||
name:key
|
||||
})
|
||||
}
|
||||
// for (let key in res.result[1]) {
|
||||
// brandList.value.push({
|
||||
// pct: res.result[1][key],
|
||||
// name: key,
|
||||
// });
|
||||
// }
|
||||
brandList.value = res.result;
|
||||
});
|
||||
}
|
||||
// 消息提醒
|
||||
async function getMessageReminder() {
|
||||
await getCarErrorIn12().then((res) => {
|
||||
res.result.forEach((el) => {
|
||||
res.result.slice(0, 1).forEach((el) => {
|
||||
el.msg = "维修提醒";
|
||||
el.reminderMsg = el.facName + el.facCode + " 需要维修";
|
||||
el.date = el.errorDateTime;
|
||||
|
|
@ -702,7 +792,7 @@ async function getMessageReminder() {
|
|||
});
|
||||
});
|
||||
await getOverTransmission().then((res) => {
|
||||
res.result.forEach((el) => {
|
||||
res.result.slice(0, 1).forEach((el) => {
|
||||
el.msg = "超时提醒";
|
||||
el.reminderMsg = el.itemDesc + el.palletNum + " 任务超时";
|
||||
el.date = el.startDate;
|
||||
|
|
@ -747,6 +837,10 @@ onMounted(() => {
|
|||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.kg {
|
||||
font-size: 0.875rem;
|
||||
margin-left: 0.2rem;
|
||||
}
|
||||
.unity {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -815,6 +909,7 @@ onMounted(() => {
|
|||
margin-right: vw(10);
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin-top: vh(15);
|
||||
margin-bottom: vh(5);
|
||||
}
|
||||
|
|
@ -824,10 +919,10 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
}
|
||||
&-brand>div{
|
||||
&-brand > div {
|
||||
margin-bottom: vh(24);
|
||||
}
|
||||
&-brand::-webkit-scrollbar{
|
||||
&-brand::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&-brand {
|
||||
|
|
@ -835,29 +930,30 @@ onMounted(() => {
|
|||
padding: vh(23) vw(10);
|
||||
box-sizing: border-box;
|
||||
height: vh(388);
|
||||
&-progress{
|
||||
&-progress {
|
||||
background-color: rgba(112, 112, 112, 0.23);
|
||||
height: vh(8);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
&-title{
|
||||
&-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: vh(10);
|
||||
font-size: 0.875rem;
|
||||
.pct{
|
||||
font-size:1rem;color:rgba(144, 218, 255, 1);font-weight:700
|
||||
.pct {
|
||||
font-size: 1rem;
|
||||
color: rgba(144, 218, 255, 1);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
&-bg{
|
||||
&-bg {
|
||||
height: 100%;
|
||||
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
background: linear-gradient( 79deg, #19AEFA 0%, #94DBFF 100%);
|
||||
background: linear-gradient(79deg, #19aefa 0%, #94dbff 100%);
|
||||
}
|
||||
}
|
||||
&-messageReminder {
|
||||
|
|
@ -873,6 +969,7 @@ onMounted(() => {
|
|||
&-search {
|
||||
:deep(.el-input__inner) {
|
||||
height: vh(40);
|
||||
font-size: 1rem;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
background-image: url("@/assets/images/home/search-input.png");
|
||||
|
|
@ -891,21 +988,22 @@ onMounted(() => {
|
|||
&-outboundWorkOrder,
|
||||
&-inboundWorkOrder {
|
||||
height: vh(388);
|
||||
padding: vh(20) vw(30);
|
||||
padding: vh(20) vw(20);
|
||||
// overflow-y: scroll;
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// align-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&-inboundWorkOrder{
|
||||
&-inboundWorkOrder {
|
||||
height: vh(205);
|
||||
}
|
||||
&-outboundWorkOrder-content::-webkit-scrollbar,
|
||||
&-inboundWorkOrder-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&-outboundWorkOrder-content,&-inboundWorkOrder-content{
|
||||
&-outboundWorkOrder-content,
|
||||
&-inboundWorkOrder-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
|
@ -917,14 +1015,23 @@ onMounted(() => {
|
|||
.left-plate {
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
margin-right: vw(32);
|
||||
img{
|
||||
margin-right: vw(30);
|
||||
img {
|
||||
width: vw(47);
|
||||
height:vh(41)
|
||||
height: vh(41);
|
||||
}
|
||||
.name {
|
||||
width: vw(65);
|
||||
}
|
||||
}
|
||||
.right-plate {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-around;
|
||||
font-size: 0.875rem;
|
||||
p {
|
||||
width: 100%;
|
||||
}
|
||||
.id {
|
||||
font-size: 1rem;
|
||||
color: rgba(144, 218, 255, 1);
|
||||
|
|
@ -968,13 +1075,16 @@ onMounted(() => {
|
|||
display: flex;
|
||||
li {
|
||||
cursor: pointer;
|
||||
width: vw(242);
|
||||
width: vw(179);
|
||||
height: vh(38);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
li:nth-child(2) {
|
||||
margin: 0 0.625rem;
|
||||
}
|
||||
li:nth-child(3) {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.el-timeline-item__wrapper) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<Nav />
|
||||
<div class="login-page">
|
||||
<div class="login-form">
|
||||
<div class="login-form-title">
|
||||
|
|
@ -57,6 +58,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import Nav from '@/views/home/components/layout.vue'
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
|
|
@ -138,6 +140,7 @@ watch(ruleForm, (newVal, oldVal) => {
|
|||
.login-page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: #000;
|
||||
background-image: url("@/assets/images/login/login-bg.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from "path";
|
||||
|
||||
import pxtorem from "postcss-pxtorem";
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
|
|
@ -23,7 +23,7 @@ export default defineConfig({
|
|||
proxy: {
|
||||
// https://cn.vitejs.dev/config/#server-proxy
|
||||
'/dev-api': {
|
||||
target: 'http://172.16.1.104:5005/',
|
||||
target: 'http://172.16.1.106:5005/',
|
||||
changeOrigin: true,
|
||||
rewrite: (p) => p.replace(/^\/dev-api/, '')
|
||||
}
|
||||
|
|
@ -37,4 +37,18 @@ export default defineConfig({
|
|||
},
|
||||
},
|
||||
},
|
||||
postcss: {
|
||||
plugins: [
|
||||
pxtorem({
|
||||
rootValue: 192, // 这里写设计稿的宽度/10即可，例如设计稿宽度是750px就写75
|
||||
// vant默认是37.5，如果是使用了vant的话可以像下面这样写
|
||||
// rootValue(res) {
|
||||
// return res.file.indexOf("vant") !== -1 ? 37.5 : 75;
|
||||
// },
|
||||
propList: ['*'], // 需要转换的属性，默认转换所有属性
|
||||
selectorBlackList: [], // CSS选择器黑名单，防止部分选择器被转换
|
||||
exclude: /\/node_modules\//i, // 忽略包文件转换rem
|
||||
})
|
||||
]
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue