10.25代码提交
This commit is contained in:
parent
c3b1d338c1
commit
e9ad90c9bd
|
|
@ -5,7 +5,7 @@ VITE_APP_TITLE = 烟厂
|
||||||
VITE_APP_ENV = 'production'
|
VITE_APP_ENV = 'production'
|
||||||
|
|
||||||
#生产环境
|
#生产环境
|
||||||
VITE_APP_BASE_API = '/prod-api'
|
VITE_APP_BASE_API = ''
|
||||||
|
|
||||||
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
||||||
VITE_BUILD_COMPRESS = gzip
|
VITE_BUILD_COMPRESS = gzip
|
||||||
|
|
@ -5,9 +5,15 @@
|
||||||
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" />-->
|
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" />-->
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>延安烟厂</title>
|
<title>延安烟厂</title>
|
||||||
|
<style type="text/css">
|
||||||
|
[v-cloak] {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app" v-cloak></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@enhances/bigscreen-fit-vue3": "^0.2.6",
|
"@enhances/bigscreen-fit-vue3": "^0.2.6",
|
||||||
|
"amfe-flexible": "^2.2.1",
|
||||||
"axios": "^1.7.2",
|
"axios": "^1.7.2",
|
||||||
"echarts": "^5.5.1",
|
"echarts": "^5.5.1",
|
||||||
"element-plus": "^2.3.14",
|
"element-plus": "^2.3.14",
|
||||||
|
|
@ -23,6 +24,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^4.2.3",
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"postcss-pxtorem": "^6.1.0",
|
||||||
"sass": "^1.77.6",
|
"sass": "^1.77.6",
|
||||||
"sass-loader": "^14.2.1",
|
"sass-loader": "^14.2.1",
|
||||||
"vite": "^4.4.5"
|
"vite": "^4.4.5"
|
||||||
|
|
@ -1066,6 +1068,11 @@
|
||||||
"ajv": "^6.9.1"
|
"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": {
|
"node_modules/anymatch": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
|
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
|
||||||
|
|
@ -2074,6 +2081,15 @@
|
||||||
"node": "^10 || ^12 || >=14"
|
"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": {
|
"node_modules/process": {
|
||||||
"version": "0.11.10",
|
"version": "0.11.10",
|
||||||
"resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
|
"resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
|
||||||
|
|
@ -3750,6 +3766,11 @@
|
||||||
"peer": true,
|
"peer": true,
|
||||||
"requires": {}
|
"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": {
|
"anymatch": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
|
"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
|
||||||
|
|
@ -4523,6 +4544,13 @@
|
||||||
"source-map-js": "^1.0.2"
|
"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": {
|
"process": {
|
||||||
"version": "0.11.10",
|
"version": "0.11.10",
|
||||||
"resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
|
"resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@enhances/bigscreen-fit-vue3": "^0.2.6",
|
"@enhances/bigscreen-fit-vue3": "^0.2.6",
|
||||||
|
"amfe-flexible": "^2.2.1",
|
||||||
"axios": "^1.7.2",
|
"axios": "^1.7.2",
|
||||||
"echarts": "^5.5.1",
|
"echarts": "^5.5.1",
|
||||||
"element-plus": "^2.3.14",
|
"element-plus": "^2.3.14",
|
||||||
|
|
@ -24,6 +25,7 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vitejs/plugin-vue": "^4.2.3",
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"postcss-pxtorem": "^6.1.0",
|
||||||
"sass": "^1.77.6",
|
"sass": "^1.77.6",
|
||||||
"sass-loader": "^14.2.1",
|
"sass-loader": "^14.2.1",
|
||||||
"vite": "^4.4.5"
|
"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,6 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en-us">
|
<html lang="en-us">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
<title>Unity WebGL Player | U3D_TobaccoWarehouseISMDTSystem</title>
|
<title>Unity WebGL Player | U3D_TobaccoWarehouseISMDTSystem</title>
|
||||||
|
|
@ -13,31 +13,24 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="unity-container" class="unity-desktop" style="width: 100%;height:100%">
|
<div id="unity-container" class="unity-desktop" style="width: 100%;height: 100%;">
|
||||||
<canvas id="unity-canvas" style="width: 100%;height:100%" tabindex="-1"></canvas>
|
<canvas id="unity-canvas" style="width: 100%;height: 100%;" tabindex="-1"></canvas>
|
||||||
<div id="unity-loading-bar">
|
<div id="unity-loading-bar">
|
||||||
<div id="unity-logo"></div>
|
<div id="unity-logo"></div>
|
||||||
<div id="unity-progress-bar-empty">
|
<div id="unity-progress-bar-empty">
|
||||||
<div id="unity-progress-bar-full"></div>
|
<div id="unity-progress-bar-full"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="unity-warning"></div>
|
<div id="unity-warning"> </div>
|
||||||
<div id="unity-footer">
|
<div id="unity-footer">
|
||||||
<div id="unity-webgl-logo"></div>
|
<div id="unity-webgl-logo"></div>
|
||||||
<div id="unity-fullscreen-button"></div>
|
<div id="unity-fullscreen-button"></div>
|
||||||
<div id="unity-build-title">U3D_TobaccoWarehouseISMDTSystem</div>
|
<div id="unity-build-title">U3D_TobaccoWarehouseISMDTSystem</div>
|
||||||
</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>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
var container = document.querySelector("#unity-container");
|
var container = document.querySelector("#unity-container");
|
||||||
var canvas = document.querySelector("#unity-canvas");
|
var canvas = document.querySelector("#unity-canvas");
|
||||||
|
|
@ -56,14 +49,13 @@
|
||||||
function updateBannerVisibility() {
|
function updateBannerVisibility() {
|
||||||
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||||||
}
|
}
|
||||||
|
|
||||||
var div = document.createElement('div');
|
var div = document.createElement('div');
|
||||||
div.innerHTML = msg;
|
div.innerHTML = msg;
|
||||||
warningBanner.appendChild(div);
|
warningBanner.appendChild(div);
|
||||||
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
||||||
else {
|
else {
|
||||||
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||||||
setTimeout(function () {
|
setTimeout(function() {
|
||||||
warningBanner.removeChild(div);
|
warningBanner.removeChild(div);
|
||||||
updateBannerVisibility();
|
updateBannerVisibility();
|
||||||
}, 5000);
|
}, 5000);
|
||||||
|
|
@ -72,11 +64,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
var buildUrl = "Build";
|
var buildUrl = "Build";
|
||||||
var loaderUrl = buildUrl + "/webgl.loader.js";
|
var loaderUrl = buildUrl + "/延安烟厂.loader.js";
|
||||||
var config = {
|
var config = {
|
||||||
dataUrl: buildUrl + "/webgl.data.unityweb",
|
dataUrl: buildUrl + "/延安烟厂.data.unityweb",
|
||||||
frameworkUrl: buildUrl + "/webgl.framework.js.unityweb",
|
frameworkUrl: buildUrl + "/延安烟厂.framework.js.unityweb",
|
||||||
codeUrl: buildUrl + "/webgl.wasm.unityweb",
|
codeUrl: buildUrl + "/延安烟厂.wasm.unityweb",
|
||||||
streamingAssetsUrl: "StreamingAssets",
|
streamingAssetsUrl: "StreamingAssets",
|
||||||
companyName: "DefaultCompany",
|
companyName: "DefaultCompany",
|
||||||
productName: "U3D_TobaccoWarehouseISMDTSystem",
|
productName: "U3D_TobaccoWarehouseISMDTSystem",
|
||||||
|
|
@ -109,86 +101,10 @@
|
||||||
} else {
|
} else {
|
||||||
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||||
|
|
||||||
// canvas.style.width = "960px";
|
// canvas.style.width = "1920px";
|
||||||
// canvas.style.height = "600px";
|
// canvas.style.height = "1080px";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//----------------------------------------------------------------------------------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";
|
loadingBar.style.display = "block";
|
||||||
|
|
||||||
var script = document.createElement("script");
|
var script = document.createElement("script");
|
||||||
|
|
@ -198,10 +114,6 @@
|
||||||
progressBarFull.style.width = 100 * progress + "%";
|
progressBarFull.style.width = 100 * progress + "%";
|
||||||
}).then((unityInstance) => {
|
}).then((unityInstance) => {
|
||||||
loadingBar.style.display = "none";
|
loadingBar.style.display = "none";
|
||||||
|
|
||||||
// 为window添加unityInstance对象
|
|
||||||
window.unityInstance = unityInstance
|
|
||||||
|
|
||||||
fullscreenButton.onclick = () => {
|
fullscreenButton.onclick = () => {
|
||||||
unityInstance.SetFullscreen(1);
|
unityInstance.SetFullscreen(1);
|
||||||
};
|
};
|
||||||
|
|
@ -212,6 +124,6 @@
|
||||||
|
|
||||||
document.body.appendChild(script);
|
document.body.appendChild(script);
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,48 +1,8 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<!--
|
|
||||||
有关如何配置 ASP.NET 应用程序的详细信息，请访问
|
|
||||||
https://go.microsoft.com/fwlink/?LinkId=169433
|
|
||||||
-->
|
|
||||||
<configuration>
|
<configuration>
|
||||||
<system.webServer>
|
<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>
|
|
||||||
<staticContent>
|
<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=".unityweb" mimeType="application/octet-stream" />
|
||||||
<mimeMap fileExtension=".framework.js.gz" mimeType="application/octet-stream" />
|
|
||||||
</staticContent>
|
</staticContent>
|
||||||
</system.webServer>
|
</system.webServer>
|
||||||
</configuration>
|
</configuration>
|
||||||
61
src/App.vue
61
src/App.vue
|
|
@ -1,70 +1,13 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { getNowTime } from "@/utils/common";
|
import Nav from "@/views/home/components/layout.vue";
|
||||||
import { onMounted, ref } from "vue";
|
|
||||||
import cloudy from '@/assets/images/login/cloudy.png'
|
|
||||||
const nowDate = ref("");
|
|
||||||
onMounted(() => {
|
|
||||||
setInterval(() => {
|
|
||||||
nowDate.value = getNowTime(true);
|
|
||||||
}, 1000);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="header">
|
<!-- <Nav /> -->
|
||||||
<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>
|
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "./assets/font/font.css";
|
@import "./assets/font/font.css";
|
||||||
// @import "./style.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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -92,3 +92,20 @@ export function getBrandTable(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({
|
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',
|
method:'get',
|
||||||
params
|
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;
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
:deep(.el-pager li) {
|
:deep(.el-pager li) {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
width: vw(36);
|
||||||
|
height: vh(28);
|
||||||
|
// padding: 0;
|
||||||
background-color: #d8e9fd0d;
|
background-color: #d8e9fd0d;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
margin: 0 0.25rem;
|
margin: 0 0.25rem;
|
||||||
}
|
}
|
||||||
|
:deep(.el-pagination){
|
||||||
|
margin-top: vh(10);
|
||||||
|
}
|
||||||
:deep(.el-pagination button) {
|
:deep(.el-pagination button) {
|
||||||
background-color: rgba(216, 233, 253, 0.05);
|
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;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -96,11 +104,11 @@ $designHeight: 1080 ;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: vw(20);
|
left: vw(20);
|
||||||
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
:deep(.el-input .el-input__wrapper.is-focus) {
|
:deep(.el-input .el-input__wrapper.is-focus) {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||||
// border-color: #dcdfe6 !important;
|
// border-color: #dcdfe6 !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
|
@ -122,6 +130,7 @@ $designHeight: 1080 ;
|
||||||
1 1;
|
1 1;
|
||||||
}
|
}
|
||||||
:deep(.el-input__inner) {
|
:deep(.el-input__inner) {
|
||||||
|
font-size: 0.875rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
:deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 1.875rem;
|
font-size: 1.875rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
&-date{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&-title{
|
&-title{
|
||||||
line-height: vh(60);
|
line-height: vh(60);
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div :id="'classProportion' + dataMap.id" ref="classProportionRef"></div>
|
<div :id="'classProportion' + dataMap.id" ref="classProportionRef"></div>
|
||||||
|
<div id="tooltipDiv" style="z-index:99999999999">
|
||||||
|
xxxxxxxxxxx
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { nextTick, onMounted, watch, ref,defineProps } from "vue";
|
import { nextTick, onMounted, watch, ref, defineProps } from "vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import getPath from '@/utils/getPath'
|
import getPath from "@/utils/getPath";
|
||||||
|
import { fontSize } from "@/utils/common";
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
dataMap: Object,
|
dataMap: Object,
|
||||||
});
|
});
|
||||||
|
|
@ -18,16 +22,17 @@ watch(
|
||||||
},
|
},
|
||||||
{ deep: true }
|
{ deep: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
function initChart() {
|
function initChart() {
|
||||||
console.log(props.dataMap.value, "props.dataMap.value");
|
|
||||||
let myChart = echarts.init(
|
let myChart = echarts.init(
|
||||||
document.getElementById("classProportion" + props.dataMap.id)
|
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 = {
|
var data = {
|
||||||
value: [props.dataMap.value],
|
value: [props.dataMap.value],
|
||||||
nAmount: 1566557.14,
|
// nAmount: 1566557.14,
|
||||||
};
|
};
|
||||||
|
|
||||||
var color = ["rgb(50,100,162)", "rgb(50,100,162)", "rgb(50,100,162)"];
|
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|%}`,
|
text: `{a|${data.value[0]}}{b|%}`,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#FFFFFF",
|
color: "#FFFFFF",
|
||||||
|
confine: true,
|
||||||
textShadowColor: "#005DFF",
|
textShadowColor: "#005DFF",
|
||||||
textShadowBlur: 16,
|
textShadowBlur: 16,
|
||||||
rich: {
|
rich: {
|
||||||
a: {
|
a: {
|
||||||
color: "#FFFFFF",
|
color: "#FFFFFF",
|
||||||
fontSize: `${fontSize}`,
|
fontSize: `${fontSize(0.25)}`,
|
||||||
fontFamily: "siyuan",
|
fontFamily: "siyuan",
|
||||||
},
|
},
|
||||||
b: {
|
b: {
|
||||||
fontSize: `${fontSize1}`,
|
fontSize: `${fontSize(0.14)}`,
|
||||||
fontFamily: "siyuan",
|
fontFamily: "siyuan",
|
||||||
// color: "#FFFFFF",
|
// color: "#FFFFFF",
|
||||||
// padding: [10, 0, 0, 10],
|
// padding: [10, 0, 0, 10],
|
||||||
|
|
@ -59,19 +65,38 @@ function initChart() {
|
||||||
// fontSize: 30
|
// fontSize: 30
|
||||||
// },
|
// },
|
||||||
left: "center",
|
left: "center",
|
||||||
top: props.dataMap.kg?"25%":'23%',
|
top: "25%",
|
||||||
},
|
},
|
||||||
graphic: [
|
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: {
|
style: {
|
||||||
image: props.dataMap.name?getPath.fontBg:'', // 图片地址
|
fill: "#fff",
|
||||||
width: 52,
|
textAlign: 'left',
|
||||||
height: 24,
|
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%',
|
name:props.dataMap.name
|
||||||
left: "center", // 【主要代码1】
|
|
||||||
top: "65.5%",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: "text",
|
type: "text",
|
||||||
|
|
@ -80,18 +105,7 @@ function initChart() {
|
||||||
top: "69%",
|
top: "69%",
|
||||||
style: {
|
style: {
|
||||||
fill: "#fff",
|
fill: "#fff",
|
||||||
text: `${props.dataMap.name?props.dataMap.name:''}`,
|
text: `${props.dataMap.type ? props.dataMap.type : ""}`,
|
||||||
fontSize: `0.8rem`,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
z: 100,
|
|
||||||
left: "center",
|
|
||||||
top: '78%',
|
|
||||||
style: {
|
|
||||||
fill: "#fff",
|
|
||||||
text: `${props.dataMap.type?props.dataMap.type:''}`,
|
|
||||||
fontSize: `0.9rem`,
|
fontSize: `0.9rem`,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -102,12 +116,13 @@ function initChart() {
|
||||||
top: "85%",
|
top: "85%",
|
||||||
style: {
|
style: {
|
||||||
fill: "rgba(255, 206, 84, 1)",
|
fill: "rgba(255, 206, 84, 1)",
|
||||||
text: `${props.dataMap.kg?props.dataMap.kg:''}`,
|
text: `${props.dataMap.kg ? props.dataMap.kg : ""}`,
|
||||||
fontSize: `18`,
|
fontSize: `1.1rem`,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
confine: true,
|
||||||
trigger: "item",
|
trigger: "item",
|
||||||
backgroundColor: "rgba(38,67,108,0.85)",
|
backgroundColor: "rgba(38,67,108,0.85)",
|
||||||
borderColor: "#D4E8FF",
|
borderColor: "#D4E8FF",
|
||||||
|
|
@ -119,10 +134,12 @@ function initChart() {
|
||||||
color: "#DDF3FF",
|
color: "#DDF3FF",
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
|
console.log(params,'xxxxxxxxxx');
|
||||||
|
|
||||||
// 添加你的单位，这里示例单位为 %
|
// 添加你的单位，这里示例单位为 %
|
||||||
// let unit = "兆瓦";
|
// let unit = "兆瓦";
|
||||||
return `<div style="width:100%;height:100%;font-size:12px;background: rgba(38,67,108,0.85);">
|
return `<div style="width:80%;height:100%;background: rgba(38,67,108,0.85);">
|
||||||
占比：${params.value}%
|
数量：${props.dataMap.kg}
|
||||||
</div>`;
|
</div>`;
|
||||||
},
|
},
|
||||||
// formatter: function (params) {
|
// formatter: function (params) {
|
||||||
|
|
@ -152,7 +169,7 @@ function initChart() {
|
||||||
polar: [
|
polar: [
|
||||||
{
|
{
|
||||||
center: ["50%", "35%"], //中心点位置
|
center: ["50%", "35%"], //中心点位置
|
||||||
radius: ["67%", "60%"], //图形大小
|
radius: ["74%", "67%"], //图形大小
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
@ -160,7 +177,7 @@ function initChart() {
|
||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
name: "内层细圆环",
|
name: "内层细圆环",
|
||||||
radius: ["90%", "80%"],
|
radius: ["95%", "85%"],
|
||||||
center: ["50%", "35%"],
|
center: ["50%", "35%"],
|
||||||
startAngle: 90,
|
startAngle: 90,
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
|
|
@ -203,7 +220,7 @@ function initChart() {
|
||||||
{
|
{
|
||||||
type: "pie",
|
type: "pie",
|
||||||
name: "内层细圆环",
|
name: "内层细圆环",
|
||||||
radius: ["65%", "60%"],
|
radius: ["72%", "67%"],
|
||||||
center: ["50%", "35%"],
|
center: ["50%", "35%"],
|
||||||
startAngle: 90,
|
startAngle: 90,
|
||||||
hoverAnimation: false,
|
hoverAnimation: false,
|
||||||
|
|
@ -231,6 +248,8 @@ function initChart() {
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener("resize", function () {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initChart();
|
initChart();
|
||||||
|
|
@ -238,7 +257,7 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
div{
|
div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -75,6 +75,7 @@
|
||||||
:total="total"
|
:total="total"
|
||||||
prev-text="上一页"
|
prev-text="上一页"
|
||||||
next-text="下一页"
|
next-text="下一页"
|
||||||
|
@current-change="getMaintenancePlanData"
|
||||||
>
|
>
|
||||||
</el-pagination>
|
</el-pagination>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -233,13 +233,14 @@ onMounted(() => {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: vh(48);
|
height: vh(48);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem !important;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: rgba(174, 211, 255, 0.03);
|
background-color: rgba(174, 211, 255, 0.03);
|
||||||
margin-bottom: vh(12);
|
margin-bottom: vh(12);
|
||||||
.preview {
|
.preview {
|
||||||
|
// font-size: 1rem;
|
||||||
color: rgba(25, 174, 250, 1);
|
color: rgba(25, 174, 250, 1);
|
||||||
margin-right: vw(24);
|
margin-right: vw(24);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -24,21 +24,21 @@
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex">
|
<div style="display: flex">
|
||||||
<div class="box-content-plate1">
|
<div class="box-content-plate1">
|
||||||
<div class="produce" v-for="item in deviceList" :key="item.id">
|
<!-- <div class="produce" v-for="item in deviceList" :key="item.id"> -->
|
||||||
<div class="produce-name">{{ item.name }}</div>
|
<!-- <div class="produce-name">{{ item.name }}</div> -->
|
||||||
<div class="produce-msg">
|
<!-- <div class="produce-msg">
|
||||||
<section class="avg">
|
<section class="avg">
|
||||||
<span>平均生产力</span>
|
<span>平均生产力</span>
|
||||||
<span>{{ item.avgPro }}</span>
|
<span>{{ item.avgPro }}</span>
|
||||||
<span>（千克/天）</span>
|
<span>（公斤/天）</span>
|
||||||
</section>
|
</section>
|
||||||
<section class="total">
|
<section class="total">
|
||||||
<span>生产总量</span>
|
<span>生产总量</span>
|
||||||
<span>{{ item.total }}</span>
|
<span>{{ item.total }}</span>
|
||||||
<span>（千克）</span>
|
<span>（公斤）</span>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
<!-- </div> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content-plate2">
|
<div class="box-content-plate2">
|
||||||
<div id="chart1"></div>
|
<div id="chart1"></div>
|
||||||
|
|
@ -52,14 +52,14 @@
|
||||||
import { ref, defineProps, onMounted, nextTick, reactive } from "vue";
|
import { ref, defineProps, onMounted, nextTick, reactive } from "vue";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { getWeightBetweenTime } from "@/api/productionInformation";
|
import { getConvoyorsOut, getConvoyorsIn } from "@/api/productionInformation";
|
||||||
const emit = defineEmits(["closeMachine"]);
|
const emit = defineEmits(["closeMachine"]);
|
||||||
const deviceList = ref([
|
const deviceList = ref([
|
||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
name: "1号翻箱机",
|
// name: "1号翻箱机",
|
||||||
total: "222699.28",
|
// total: "222699.28",
|
||||||
avgPro: "27897.41",
|
// avgPro: "27897.41",
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// name: "2号翻箱机",
|
// name: "2号翻箱机",
|
||||||
|
|
@ -70,7 +70,7 @@ const deviceList = ref([
|
||||||
]);
|
]);
|
||||||
// 时间区间
|
// 时间区间
|
||||||
const date = 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"),
|
moment().format("YYYY-MM-DD"),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
@ -82,136 +82,181 @@ function close() {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 头部的轮播图
|
// 头部的轮播图
|
||||||
function drawChart1(res) {
|
function drawChart1(data) {
|
||||||
let xData = [];
|
|
||||||
let yData = [];
|
const newData = [];
|
||||||
for (let key in res) {
|
const keys = Object.keys(data[0].nums);
|
||||||
xData.push(key.split(" ")[0]);
|
|
||||||
yData.push(res[key]);
|
keys.forEach((key) => {
|
||||||
}
|
const values = data.map((item) => item.nums[key]);
|
||||||
let dom = document.querySelector("#chart1");
|
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_");
|
dom.removeAttribute("_echarts_instance_");
|
||||||
let myChart;
|
let myChart;
|
||||||
myChart = echarts.init(dom);
|
myChart = echarts.init(dom);
|
||||||
let option = {
|
// let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||||
tooltip: {},
|
var option = {
|
||||||
grid: {
|
tooltip: {
|
||||||
top: "15%",
|
axisPointer: {
|
||||||
left: "3%",
|
type: "shadow",
|
||||||
right: "5%",
|
|
||||||
bottom: "0%",
|
|
||||||
containLabel: true,
|
|
||||||
},
|
|
||||||
// dataZoom: [
|
|
||||||
// {
|
|
||||||
// type: "slider", // 设置为滑动条型式
|
|
||||||
// show: true, // 显示dataZoom组件
|
|
||||||
// start: 0, // 默认显示的起始位置为0
|
|
||||||
// end: 49, // 默认显示的结束位置为100
|
|
||||||
// handleSize: 8, // 滑动条的手柄大小
|
|
||||||
// handleStyle: {
|
|
||||||
// color: "#DCE2E8", // 滑动条的手柄颜色
|
|
||||||
// },
|
|
||||||
// xAxisIndex: [0], // 表示控制第一个x轴
|
|
||||||
// filterMode: "filter", // 设置为filter模式，即数据超过范围时会被过滤掉
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
interval: 0,
|
|
||||||
type: "category",
|
|
||||||
boundaryGap: false,
|
|
||||||
axisLine: {
|
|
||||||
//坐标轴轴线相关设置。数学上的x轴
|
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
|
||||||
color: "#233e64",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
interval: 0,
|
|
||||||
// align:'left',
|
|
||||||
// rotate:180,
|
|
||||||
//坐标轴刻度标签的相关设置
|
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: "0.875rem",
|
|
||||||
// margin: 15,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
axisTick: { show: false },
|
},
|
||||||
data: xData,
|
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: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
trigger: "axis",
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
// type:'dashed',
|
||||||
|
color: "#557775",
|
||||||
|
// color: "#233e64",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: "#DDFFFD",
|
||||||
|
margin: 40,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: data.map((el) => {
|
||||||
|
return el.dateTime.split(' ')[0];
|
||||||
|
}),
|
||||||
|
// data: data.map((el) => {
|
||||||
|
// return el.time;
|
||||||
|
// }),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: "value",
|
type: "value",
|
||||||
name: "单位:kg",
|
name: "单位:公斤",
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#DDFFFD",
|
||||||
fontSize: "0.875rem",
|
// align:"right",
|
||||||
|
padding: [0, 30, 0, 0],
|
||||||
},
|
},
|
||||||
// splitNumber: 5,
|
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: true,
|
||||||
lineStyle: {
|
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: {
|
axisLabel: {
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff",
|
color: "#DDFFFD",
|
||||||
fontSize: "0.875rem",
|
|
||||||
},
|
},
|
||||||
|
// 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: [
|
series: newData.map((el, index) => {
|
||||||
{
|
|
||||||
name: "异常流量",
|
|
||||||
type: "line",
|
|
||||||
|
|
||||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
return {
|
||||||
symbolSize: 0,
|
name: el.name,
|
||||||
|
type: "bar",
|
||||||
lineStyle: {
|
barMaxWidth: 15,
|
||||||
normal: {
|
stack: "Total1",
|
||||||
color: "rgba(24, 174, 250, 1)", // 线条颜色
|
label: {
|
||||||
|
show: false,
|
||||||
},
|
},
|
||||||
|
itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
// {
|
||||||
|
// offset: 0,
|
||||||
|
// color: color[index],
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// offset: 1,
|
||||||
|
// color: color1[index],
|
||||||
|
// },
|
||||||
|
// ]),
|
||||||
|
// },
|
||||||
},
|
},
|
||||||
areaStyle: {
|
data: el.value,
|
||||||
//区域填充样式
|
};
|
||||||
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, 设置图形的阴影效果。
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: yData,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
nextTick(() => {
|
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
});
|
// 添加 resize 事件处理程序
|
||||||
|
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener("resize", function () {
|
||||||
myChart.resize();
|
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// 底部的折线图
|
// 底部的折线图
|
||||||
|
|
@ -332,12 +377,8 @@ function drawChart2() {
|
||||||
}
|
}
|
||||||
// 筛选的时间参数
|
// 筛选的时间参数
|
||||||
const params = reactive({
|
const params = reactive({
|
||||||
startTimeYear: "",
|
startTime: "",
|
||||||
startTimeMonth: "",
|
endTime: "",
|
||||||
startTimeDay: "",
|
|
||||||
endTimeYear: "",
|
|
||||||
endTimeMonth: "",
|
|
||||||
endTimeDay: "",
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// const
|
// const
|
||||||
|
|
@ -347,20 +388,25 @@ function getCountData(val) {
|
||||||
date.value[0] = moment(date.value[0]).format("YYYY-MM-DD");
|
date.value[0] = moment(date.value[0]).format("YYYY-MM-DD");
|
||||||
date.value[1] = moment(date.value[1]).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("-");
|
if (props.title == "出库统计") {
|
||||||
let endList = date.value[1].split("-");
|
getConvoyorsOut(params).then((res) => {
|
||||||
params.startTimeYear = startList[0];
|
if (res.code == 200) {
|
||||||
params.startTimeMonth = startList[1];
|
drawChart1(res.result);
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
|
} 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(() => {
|
onMounted(() => {
|
||||||
getCountData();
|
getCountData();
|
||||||
|
|
@ -420,9 +466,9 @@ onMounted(() => {
|
||||||
font-family: "pangmen";
|
font-family: "pangmen";
|
||||||
}
|
}
|
||||||
&-plate1 {
|
&-plate1 {
|
||||||
float: left;
|
// float: left;
|
||||||
width: vw(224);
|
// width: vw(224);
|
||||||
height: vh(592);
|
// height: vh(592);
|
||||||
.produce {
|
.produce {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -486,9 +532,9 @@ onMounted(() => {
|
||||||
#chart1,
|
#chart1,
|
||||||
#chart2 {
|
#chart2 {
|
||||||
margin-top: vh(20);
|
margin-top: vh(20);
|
||||||
width: vw(800);
|
width: vw(1048);
|
||||||
// height: vh(228);
|
// height: vh(228);
|
||||||
height: vh(456);
|
height: vh(480);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
v-for="(item, index) in Math.ceil(chartList.length / 8)"
|
v-for="(item, index) in Math.ceil(chartList.length / 8)"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
>
|
>
|
||||||
<div v-if="index == chartIndex" style="display: flex">
|
<div v-if="index == chartIndex" style="display: flex;width: 100%;" >
|
||||||
<div
|
<div
|
||||||
class="box-content-chart-item"
|
class="box-content-chart-item"
|
||||||
v-for="item in chartList.slice(index * 8, 8 * (index + 1))"
|
v-for="item in chartList.slice(index * 8, 8 * (index + 1))"
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
<span> 入库信息统计 </span>
|
<span> 入库信息统计 </span>
|
||||||
<div>
|
<div>
|
||||||
<ul v-if="storeList">
|
<ul v-if="storeList">
|
||||||
<li><span>单位：</span><span>kg</span></li>
|
<li><span>单位：</span><span>公斤</span></li>
|
||||||
<li>
|
<li>
|
||||||
<span>总量：</span><span>{{ storeList.totalWeight }}</span>
|
<span>总量：</span><span>{{ storeList.totalWeight }}</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
type="year"
|
type="year"
|
||||||
placeholder="请选择年份"
|
placeholder="请选择年份"
|
||||||
@change="
|
@change="
|
||||||
getAllBrandName(true);
|
getBrandChart(true);
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -72,7 +72,7 @@
|
||||||
class="m-2"
|
class="m-2"
|
||||||
placeholder="请选择月份"
|
placeholder="请选择月份"
|
||||||
clearable
|
clearable
|
||||||
@change="getAllBrandName()"
|
@change="getBrandChart()"
|
||||||
>
|
>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="(item,index) in options"
|
v-for="(item,index) in options"
|
||||||
|
|
@ -90,9 +90,10 @@
|
||||||
<el-collapse-item title="品牌" name="1">
|
<el-collapse-item title="品牌" name="1">
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
<div
|
<div
|
||||||
v-for="item in brandList"
|
v-for="(item,index) in brandList"
|
||||||
:key="item"
|
: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(0, 2) }}</span>
|
||||||
<span>{{ item.slice(2) }}</span>
|
<span>{{ item.slice(2) }}</span>
|
||||||
|
|
@ -125,92 +126,99 @@ import * as echarts from "echarts";
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
title: String,
|
title: String,
|
||||||
});
|
});
|
||||||
|
// 品牌列表默认选中
|
||||||
|
const brandIndex = ref(0)
|
||||||
const options = ref(['1','2','3','4','5','6','7','8','9','10','11','12'])
|
const options = ref(['1','2','3','4','5','6','7','8','9','10','11','12'])
|
||||||
const activeNames = ref(["1"]);
|
const activeNames = ref(["1"]);
|
||||||
const emit = defineEmits(["closeBoundMsg"]);
|
const emit = defineEmits(["closeBoundMsg"]);
|
||||||
const chartIndex = ref(0);
|
const chartIndex = ref(0);
|
||||||
const btnName = ref("left");
|
const btnName = ref("left");
|
||||||
const chartList = ref([
|
const chartList = ref([
|
||||||
{
|
// {
|
||||||
id: 11,
|
// id: 11,
|
||||||
name: "利群",
|
// name: "利群",
|
||||||
type: "(硬珍品)烟丝",
|
// type: "(硬珍品)烟丝",
|
||||||
value: 20,
|
// value: 20,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 12,
|
// id: 12,
|
||||||
name: "利群",
|
// name: "利群",
|
||||||
type: "(硬珍品)烟丝",
|
// type: "(硬珍品)烟丝",
|
||||||
value: 20,
|
// value: 20,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 13,
|
// id: 13,
|
||||||
name: "利群",
|
// name: "利群",
|
||||||
type: "(硬珍品)烟丝",
|
// type: "(硬珍品)烟丝",
|
||||||
value: 20,
|
// value: 20,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 14,
|
// id: 14,
|
||||||
name: "利群",
|
// name: "利群",
|
||||||
type: "(硬珍品)烟丝",
|
// type: "(硬珍品)烟丝",
|
||||||
value: 20,
|
// value: 20,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 15,
|
// id: 15,
|
||||||
name: "利群",
|
// name: "利群",
|
||||||
type: "(硬珍品)烟丝",
|
// type: "(硬珍品)烟丝",
|
||||||
value: 20,
|
// value: 20,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 16,
|
// id: 16,
|
||||||
name: "利群",
|
// name: "利群",
|
||||||
type: "(硬珍品)烟丝",
|
// type: "(硬珍品)烟丝",
|
||||||
value: 20,
|
// value: 20,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 17,
|
// id: 17,
|
||||||
name: "利群",
|
// name: "利群",
|
||||||
type: "(硬珍品)烟丝",
|
// type: "(硬珍品)烟丝",
|
||||||
value: 20,
|
// value: 20,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 18,
|
// id: 18,
|
||||||
name: "利群",
|
// name: "利群",
|
||||||
type: "(硬珍品)烟丝",
|
// type: "(硬珍品)烟丝",
|
||||||
value: 20,
|
// value: 20,
|
||||||
},
|
// },
|
||||||
|
|
||||||
{
|
// {
|
||||||
id: 19,
|
// id: 19,
|
||||||
name: "利群",
|
// name: "利群",
|
||||||
type: "(硬珍品)烟丝",
|
// type: "(硬珍品)烟丝",
|
||||||
value: 20,
|
// value: 20,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 20,
|
// id: 20,
|
||||||
name: "利群",
|
// name: "利群",
|
||||||
type: "(硬珍品)烟丝",
|
// type: "(硬珍品)烟丝",
|
||||||
value: 20,
|
// value: 20,
|
||||||
},
|
// },
|
||||||
]);
|
]);
|
||||||
// 获取占比图列表
|
// 获取占比图列表
|
||||||
function getChartList() {
|
function getChartList() {
|
||||||
if (props.title === "入库信息") {
|
if (props.title === "入库信息") {
|
||||||
getBrandPercent().then((res) => {
|
getBrandPercent().then((res) => {
|
||||||
chartList.value = res.result.columnDatas.map((ele) => {
|
chartList.value = res.result.columnDatas.map((ele,index) => {
|
||||||
return {
|
return {
|
||||||
type: ele.name,
|
id:index++,
|
||||||
value: ele.percentage * 100,
|
kg:ele.number + '箱',
|
||||||
|
name: ele.name,
|
||||||
|
value: (ele.percentage * 100).toFixed(2),
|
||||||
|
msg:true,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
getOutBrandPercent().then((res) => {
|
getOutBrandPercent().then((res) => {
|
||||||
chartList.value = res.result.columnDatas.map((ele) => {
|
chartList.value = res.result.columnDatas.map((ele,index) => {
|
||||||
return {
|
return {
|
||||||
type: ele.name,
|
id:index++,
|
||||||
value: ele.percentage * 100,
|
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图
|
// 根据品牌名称获取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 === "入库信息") {
|
if (props.title === "入库信息") {
|
||||||
getBrandTimeCount(params).then((res) => {
|
getBrandTimeCount(params).then((res) => {
|
||||||
drawBarChart(res.result);
|
drawBarChart(res.result);
|
||||||
|
|
@ -295,15 +315,15 @@ function close() {
|
||||||
}
|
}
|
||||||
const value2 = ref("");
|
const value2 = ref("");
|
||||||
const brandList = ref([
|
const brandList = ref([
|
||||||
"兰州(硬珍品)烟丝",
|
// "兰州(硬珍品)烟丝",
|
||||||
"利群(长嘴)烟丝",
|
// "利群(长嘴)烟丝",
|
||||||
"兰州(硬吉祥)烟丝",
|
// "兰州(硬吉祥)烟丝",
|
||||||
"兰州(硬珍品)烟丝",
|
// "兰州(硬珍品)烟丝",
|
||||||
"利群(长嘴)烟丝",
|
// "利群(长嘴)烟丝",
|
||||||
"兰州(硬吉祥)烟丝",
|
// "兰州(硬吉祥)烟丝",
|
||||||
"兰州(硬珍品)烟丝",
|
// "兰州(硬珍品)烟丝",
|
||||||
"利群(长嘴)烟丝",
|
// "利群(长嘴)烟丝",
|
||||||
"兰州(硬吉祥)烟丝",
|
// "兰州(硬吉祥)烟丝",
|
||||||
]);
|
]);
|
||||||
function drawBarChart(res) {
|
function drawBarChart(res) {
|
||||||
let dom = document.querySelector("#barChart");
|
let dom = document.querySelector("#barChart");
|
||||||
|
|
@ -317,6 +337,9 @@ function drawBarChart(res) {
|
||||||
right: "2%",
|
right: "2%",
|
||||||
top: "15%",
|
top: "15%",
|
||||||
},
|
},
|
||||||
|
tooltip:{
|
||||||
|
show:true
|
||||||
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: res.map((ele, index) => {
|
data: res.map((ele, index) => {
|
||||||
return index + 1;
|
return index + 1;
|
||||||
|
|
@ -328,14 +351,14 @@ function drawBarChart(res) {
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 14,
|
fontSize: '0.875rem',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: "单位:kg",
|
name: "单位:公斤",
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: "1rem",
|
fontSize: "0.875rem",
|
||||||
padding: [0, 35, 10, 0],
|
padding: [0, 35, 10, 0],
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
|
|
@ -402,7 +425,11 @@ onMounted(() => {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.num-select{
|
||||||
|
background-image: url("@/assets/images/dialog/num-select.png") !important;
|
||||||
|
}
|
||||||
.swiper {
|
.swiper {
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: all linear 0.2s;
|
transition: all linear 0.2s;
|
||||||
|
|
@ -465,7 +492,7 @@ onMounted(() => {
|
||||||
height: vh(818 - 60);
|
height: vh(818 - 60);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
&-chart {
|
&-chart {
|
||||||
padding: vh(55) vw(88) 0 vw(88);
|
padding: vh(40) vw(88) 0 vw(88);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -481,13 +508,16 @@ onMounted(() => {
|
||||||
.swiper-box {
|
.swiper-box {
|
||||||
transition: all 0.5s ease-in-out;
|
transition: all 0.5s ease-in-out;
|
||||||
}
|
}
|
||||||
|
// &-item:nth-child(1){
|
||||||
|
// margin-left: vw(35);
|
||||||
|
// }
|
||||||
&-item {
|
&-item {
|
||||||
margin-right: vw(52);
|
margin-right: vw(40);
|
||||||
// width: vw(100);
|
// width: vw(100);
|
||||||
// height: vh(170);
|
// height: vh(170);
|
||||||
.chart {
|
.chart {
|
||||||
width: vw(110);
|
width: vw(110);
|
||||||
height: vh(170);
|
height: vh(190);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-item:nth-of-type(8n) {
|
&-item:nth-of-type(8n) {
|
||||||
|
|
@ -565,10 +595,12 @@ onMounted(() => {
|
||||||
.brand-item {
|
.brand-item {
|
||||||
width: vw(200);
|
width: vw(200);
|
||||||
height: vh(36);
|
height: vh(36);
|
||||||
|
font-size: 1rem;
|
||||||
line-height: vh(36);
|
line-height: vh(36);
|
||||||
margin: vh(2) 0;
|
margin: vh(2) 0;
|
||||||
padding-left: vw(14);
|
padding-left: vw(14);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
background-size: 100% 100%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-image: url("@/assets/images/dialog/down-default.png");
|
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"
|
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')
|
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 Login from '../view/Login.vue'
|
||||||
|
|
||||||
|
import Layout from '@/views/home/components/layout.vue'
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path:'/',
|
path:'/',
|
||||||
|
name:'',
|
||||||
redirect:'/login',
|
redirect:'/login',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -17,6 +18,18 @@ const routes = [
|
||||||
name:'home',
|
name:'home',
|
||||||
component: () => import('@/views/home/index')
|
component: () => import('@/views/home/index')
|
||||||
}
|
}
|
||||||
|
// {
|
||||||
|
// path:'/',
|
||||||
|
// redirect:'/login',
|
||||||
|
// component:Layout,
|
||||||
|
// children:[
|
||||||
|
// {
|
||||||
|
// path:'/login',
|
||||||
|
// name:'login',
|
||||||
|
// component: () => import('@/views/login')
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
// }
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
#app,
|
#app,
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
height: 100%;
|
height: 100vh;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
// 给时间补零
|
// 给时间补零
|
||||||
function fillZero(str){
|
function fillZero(str) {
|
||||||
var realNum;
|
var realNum;
|
||||||
if (str < 10) {
|
if (str < 10) {
|
||||||
realNum = '0' + str;
|
realNum = '0' + str;
|
||||||
|
|
@ -8,7 +8,7 @@ function fillZero(str){
|
||||||
}
|
}
|
||||||
return realNum;
|
return realNum;
|
||||||
}
|
}
|
||||||
export function getNowTime(isAll){
|
export function getNowTime(isAll) {
|
||||||
let now = new Date();
|
let now = new Date();
|
||||||
let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
|
let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
|
||||||
let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
|
let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
|
||||||
|
|
@ -18,12 +18,21 @@ export function getNowTime(isAll){
|
||||||
let second = now.getSeconds(); //获取当前秒数(0-59)
|
let second = now.getSeconds(); //获取当前秒数(0-59)
|
||||||
let nowTime = ''
|
let nowTime = ''
|
||||||
//返回年月日时分秒
|
//返回年月日时分秒
|
||||||
if(isAll){
|
if (isAll) {
|
||||||
nowTime = year + '.' + fillZero(month) + '.' + fillZero(today) + ' ' + fillZero(hour) + ':' + fillZero(minute) + ':' + fillZero(second)
|
nowTime = year + '.' + fillZero(month) + '.' + fillZero(today) + ' ' + fillZero(hour) + ':' + fillZero(minute) + ':' + fillZero(second)
|
||||||
}else{//返回年月日
|
} else {//返回年月日
|
||||||
nowTime = year + '.' + fillZero(month) + '.' + fillZero(today)
|
nowTime = year + '.' + fillZero(month) + '.' + fillZero(today)
|
||||||
}
|
}
|
||||||
return nowTime
|
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,
|
default: getPath.dev6,
|
||||||
select: getPath.dev6Select,
|
select: getPath.dev6Select,
|
||||||
title:'喂丝机出库统计'
|
title:'出库统计'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
default: getPath.dev7,
|
default: getPath.dev7,
|
||||||
select: getPath.dev7Select,
|
select: getPath.dev7Select,
|
||||||
title:'装箱站入库统计'
|
title:'入库统计'
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -64,14 +64,14 @@ const list = ref([
|
||||||
default: getPath.device4,
|
default: getPath.device4,
|
||||||
select: getPath.device4Select,
|
select: getPath.device4Select,
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
default: getPath.device5,
|
// default: getPath.device5,
|
||||||
select: getPath.device5Select,
|
// select: getPath.device5Select,
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
default: getPath.device6,
|
// default: getPath.device6,
|
||||||
select: getPath.device6Select,
|
// select: getPath.device6Select,
|
||||||
},
|
// },
|
||||||
]);
|
]);
|
||||||
function close(value) {
|
function close(value) {
|
||||||
emit("closeDialog", value);
|
emit("closeDialog", value);
|
||||||
|
|
|
||||||
|
|
@ -11,10 +11,20 @@
|
||||||
<span>即时库存信息情况</span>
|
<span>即时库存信息情况</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content-chart">
|
<div class="box-content-chart">
|
||||||
<div class="pre"></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
|
<div
|
||||||
class="box-content-chart-item"
|
class="box-content-chart-item"
|
||||||
v-for="item in list"
|
v-for="(item, index) in list.slice(
|
||||||
|
index * 5,
|
||||||
|
5 * (index + 1)
|
||||||
|
)"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
>
|
>
|
||||||
<div class="chart">
|
<div class="chart">
|
||||||
|
|
@ -22,8 +32,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="next"></div>
|
</transition>
|
||||||
|
</div>
|
||||||
|
<div class="next" @click="nextPage"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content-search">
|
<div class="box-content-search">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -34,7 +46,7 @@
|
||||||
placeholder="请输入搜索内容"
|
placeholder="请输入搜索内容"
|
||||||
:prefix-icon="Search"
|
:prefix-icon="Search"
|
||||||
/>
|
/>
|
||||||
<el-select
|
<!-- <el-select
|
||||||
style="margin-left:1rem"
|
style="margin-left:1rem"
|
||||||
v-model="tableParams.orderByLoc"
|
v-model="tableParams.orderByLoc"
|
||||||
class="m-2"
|
class="m-2"
|
||||||
|
|
@ -43,7 +55,7 @@
|
||||||
>
|
>
|
||||||
<el-option label="是" :value="true" />
|
<el-option label="是" :value="true" />
|
||||||
<el-option label="否" :value="false" />
|
<el-option label="否" :value="false" />
|
||||||
</el-select>
|
</el-select> -->
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -72,18 +84,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content-table">
|
<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
|
<el-table-column
|
||||||
type="index"
|
type="index"
|
||||||
label="序号"
|
label="序号"
|
||||||
width="50"
|
|
||||||
:index="indexMethod"
|
:index="indexMethod"
|
||||||
|
width="80"
|
||||||
/>
|
/>
|
||||||
<el-table-column prop="palletNum" label="托盘号" />
|
<el-table-column prop="palletNum" label="托盘号" />
|
||||||
<el-table-column prop="storeLoc" label="当前存放位置" />
|
<el-table-column prop="storeLoc" sortable="custom" label="当前存放位置" />
|
||||||
<el-table-column prop="itemDesc" label="物料描述" />
|
<el-table-column prop="itemDesc" :show-overflow-tooltip="true" label="物料描述" />
|
||||||
<el-table-column prop="batchNum" label="批次" />
|
<el-table-column prop="batchNum" :show-overflow-tooltip="true" label="批次" />
|
||||||
<el-table-column prop="inputTime" label="入库时间" width="200" />
|
<el-table-column prop="inputTime" label="入库时间"/>
|
||||||
<!-- <el-table-column prop="number" label="编号" /> -->
|
<!-- <el-table-column prop="number" label="编号" /> -->
|
||||||
<el-table-column prop="upWeight" label="上箱重量" />
|
<el-table-column prop="upWeight" label="上箱重量" />
|
||||||
<el-table-column prop="downWeight" label="下箱重量" />
|
<el-table-column prop="downWeight" label="下箱重量" />
|
||||||
|
|
@ -149,7 +161,25 @@ const list = ref([
|
||||||
// value: 40,
|
// 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({
|
const areaNum = reactive({
|
||||||
storeNum: 10,
|
storeNum: 10,
|
||||||
|
|
@ -159,50 +189,50 @@ const areaNum = reactive({
|
||||||
});
|
});
|
||||||
// table数据
|
// table数据
|
||||||
const tableList = ref([
|
const tableList = ref([
|
||||||
{
|
// {
|
||||||
id: 1,
|
// id: 1,
|
||||||
trayNumber: 201425,
|
// trayNumber: 201425,
|
||||||
address: "1巷道2行16列",
|
// address: "1巷道2行16列",
|
||||||
dsc: "兰州硬支",
|
// dsc: "兰州硬支",
|
||||||
batch: "YZP2303018",
|
// batch: "YZP2303018",
|
||||||
number: "201452",
|
// number: "201452",
|
||||||
downWeight: "158.75",
|
// downWeight: "158.75",
|
||||||
inDate: "2023-03-09",
|
// inDate: "2023-03-09",
|
||||||
upWeight: "156.5",
|
// upWeight: "156.5",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 2,
|
// id: 2,
|
||||||
trayNumber: 201425,
|
// trayNumber: 201425,
|
||||||
address: "1巷道2行16列",
|
// address: "1巷道2行16列",
|
||||||
dsc: "兰州硬支",
|
// dsc: "兰州硬支",
|
||||||
batch: "YZP2303018",
|
// batch: "YZP2303018",
|
||||||
number: "201452",
|
// number: "201452",
|
||||||
downWeight: "158.75",
|
// downWeight: "158.75",
|
||||||
inDate: "2023-03-09",
|
// inDate: "2023-03-09",
|
||||||
upWeight: "156.5",
|
// upWeight: "156.5",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 3,
|
// id: 3,
|
||||||
trayNumber: 201425,
|
// trayNumber: 201425,
|
||||||
address: "1巷道2行16列",
|
// address: "1巷道2行16列",
|
||||||
dsc: "兰州硬支",
|
// dsc: "兰州硬支",
|
||||||
batch: "YZP2303018",
|
// batch: "YZP2303018",
|
||||||
number: "201452",
|
// number: "201452",
|
||||||
downWeight: "158.75",
|
// downWeight: "158.75",
|
||||||
inDate: "2023-03-09",
|
// inDate: "2023-03-09",
|
||||||
upWeight: "156.5",
|
// upWeight: "156.5",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
id: 4,
|
// id: 4,
|
||||||
trayNumber: 201425,
|
// trayNumber: 201425,
|
||||||
address: "1巷道2行16列",
|
// address: "1巷道2行16列",
|
||||||
dsc: "兰州硬支",
|
// dsc: "兰州硬支",
|
||||||
batch: "YZP2303018",
|
// batch: "YZP2303018",
|
||||||
number: "201452",
|
// number: "201452",
|
||||||
downWeight: "158.75",
|
// downWeight: "158.75",
|
||||||
inDate: "2023-03-09",
|
// inDate: "2023-03-09",
|
||||||
upWeight: "156.5",
|
// upWeight: "156.5",
|
||||||
},
|
// },
|
||||||
]);
|
]);
|
||||||
function close() {
|
function close() {
|
||||||
emit("closeBrand", false);
|
emit("closeBrand", false);
|
||||||
|
|
@ -211,7 +241,7 @@ function close() {
|
||||||
const tableTotal = ref(0);
|
const tableTotal = ref(0);
|
||||||
const tableParams = reactive({
|
const tableParams = reactive({
|
||||||
index: 1,
|
index: 1,
|
||||||
size: 4,
|
size: 10,
|
||||||
name: "",
|
name: "",
|
||||||
orderByLoc: false,
|
orderByLoc: false,
|
||||||
});
|
});
|
||||||
|
|
@ -229,14 +259,23 @@ function indexMethod(index) {
|
||||||
const id = ref(0);
|
const id = ref(0);
|
||||||
function getChartData() {
|
function getChartData() {
|
||||||
getStoreMsg().then((res) => {
|
getStoreMsg().then((res) => {
|
||||||
for (let key in res.result[1]) {
|
// for (let key in res.result[1]) {
|
||||||
list.value.push({
|
// list.value.push({
|
||||||
name: key,
|
// name: key,
|
||||||
kg: res.result[1][key] * res.result[0] + "kg",
|
// kg: (res.result[1][key] * res.result[0]).toFixed(2) + "kg",
|
||||||
id: id.value++,
|
// id: id.value++,
|
||||||
value: res.result[1][key] * 100,
|
// 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);
|
console.log(list.value);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -261,14 +300,25 @@ onMounted(() => {
|
||||||
// 获取即时库存table数据
|
// 获取即时库存table数据
|
||||||
getTableList();
|
getTableList();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function sortHandle(event){
|
||||||
|
tableParams.orderByLoc = event.order == 'ascending'
|
||||||
|
getTableList()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.swiper {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all linear 0.2s;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
.pre,
|
.pre,
|
||||||
.next {
|
.next {
|
||||||
width: vw(36);
|
width: vw(36);
|
||||||
height: vh(36);
|
height: vh(36);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40%;
|
top: 30%;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -282,14 +332,14 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
.box {
|
.box {
|
||||||
width: vw(1380);
|
width: vw(1380);
|
||||||
height: vh(716);
|
height: vh(818);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
background-image: url("@/assets/images/dialog/device-dialog1.png");
|
background-image: url("@/assets/images/dialog/device-dialog2.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
&-header {
|
&-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -321,32 +371,42 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-table {
|
&-table {
|
||||||
height: vh(245);
|
height: vh(407);
|
||||||
}
|
}
|
||||||
&-chart {
|
&-chart {
|
||||||
padding: 0 vw(79);
|
padding: 0 vw(79);
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
height: vh(224);
|
height: vh(190);
|
||||||
|
&-item:nth-child(1){
|
||||||
|
margin-left: vw(25);
|
||||||
|
}
|
||||||
&-item {
|
&-item {
|
||||||
// width: vw(120);
|
// width: vw(120);
|
||||||
display: flex;
|
display: flex;
|
||||||
height: vh(224);
|
height: vh(190);
|
||||||
.chart {
|
.chart {
|
||||||
width: vw(120);
|
width: vw(110);
|
||||||
height: vh(224);
|
height: vh(190);
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
.line {
|
.line {
|
||||||
width: vw(89);
|
width: vw(89);
|
||||||
height: vh(12);
|
height: vh(12);
|
||||||
margin: 0 vw(29);
|
margin: 0 vw(28);
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 40%;
|
top: 40%;
|
||||||
background-image: url("@/assets/images/dialog/line.png");
|
background-image: url("@/assets/images/dialog/line.png");
|
||||||
background-size: 100% 100%;
|
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;
|
width: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
|
|
@ -355,8 +415,9 @@ onMounted(() => {
|
||||||
&-search {
|
&-search {
|
||||||
margin-bottom: vh(12);
|
margin-bottom: vh(12);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
font-size: 1rem;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: vh(28);
|
// margin-top: vh(28);
|
||||||
ul {
|
ul {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -419,7 +480,7 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
:deep(.el-table .cell) {
|
:deep(.el-table .cell) {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
line-height: vh(48);
|
line-height: vh(36) !important;
|
||||||
}
|
}
|
||||||
:deep(.el-table tr),
|
:deep(.el-table tr),
|
||||||
:deep(.el-table),
|
:deep(.el-table),
|
||||||
|
|
@ -428,7 +489,7 @@ onMounted(() => {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
:deep(.el-table__row) {
|
:deep(.el-table__row) {
|
||||||
height: vh(48);
|
height: vh(36) !important;
|
||||||
border: 1px solid rgba(144, 218, 255, 1) !important;
|
border: 1px solid rgba(144, 218, 255, 1) !important;
|
||||||
}
|
}
|
||||||
:deep(.el-table) {
|
:deep(.el-table) {
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<div class="box-content" v-if="props.title === '入库工单'">
|
<div class="box-content" v-if="props.title === '入库工单'">
|
||||||
<div
|
<div
|
||||||
class="box-content-item in"
|
class="box-content-item in"
|
||||||
v-for="(item, index) in props.data"
|
v-for="(item, index) in list"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<div class="in-left">
|
<div class="in-left">
|
||||||
|
|
@ -20,18 +20,32 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="in-left-border">
|
<div class="in-left-border">
|
||||||
<span class="name">预计装箱总数</span>
|
<span class="name">预计装箱总数</span>
|
||||||
<span>{{ item.planBoxQuantity }}</span>
|
<span>{{ item.planBoxQuantity }}箱</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="in-right">
|
<div class="in-right">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<span class="name">工单号</span>
|
<span class="name">工单号</span>
|
||||||
|
<el-tooltip
|
||||||
|
class="box-item"
|
||||||
|
effect="dark"
|
||||||
|
:content="item.orderNum"
|
||||||
|
placement="top-start"
|
||||||
|
>
|
||||||
<span>{{ item.orderNum }}</span>
|
<span>{{ item.orderNum }}</span>
|
||||||
|
</el-tooltip>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="name">批次号</span>
|
<span class="name">批次号</span>
|
||||||
|
<el-tooltip
|
||||||
|
class="box-item"
|
||||||
|
effect="dark"
|
||||||
|
:content="item.batch"
|
||||||
|
placement="top-start"
|
||||||
|
>
|
||||||
<span>{{ item.batch }}</span>
|
<span>{{ item.batch }}</span>
|
||||||
|
</el-tooltip>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="name">品牌</span>
|
<span class="name">品牌</span>
|
||||||
|
|
@ -39,27 +53,28 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="name">计划量</span>
|
<span class="name">计划量</span>
|
||||||
<span>{{ item.planWeight }}</span>
|
<span>{{ item.planWeight }}公斤</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<span class="name">已装箱数</span>
|
||||||
|
<span>{{ item.inNum }}箱</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="name">工单开始时间</span>
|
<span class="name">剩余箱数</span>
|
||||||
|
<span>{{getResult(item)}}箱</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="name">开始时间</span>
|
||||||
<span>{{ item.creatTime }}</span>
|
<span>{{ item.creatTime }}</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="name">预计完成时间</span>
|
<span class="name">预计结束时间</span>
|
||||||
<span>{{ item.planFinishTime }}</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>
|
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="name">状态</span>
|
<span class="name">状态</span>
|
||||||
<span>{{ item.status==='Doing'?'执行中':'已完成' }}</span>
|
<span>{{ item.status === "Doing" ? "执行中" : "已完成" }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -69,7 +84,7 @@
|
||||||
<div class="box-content" v-else>
|
<div class="box-content" v-else>
|
||||||
<div
|
<div
|
||||||
class="box-content-item out"
|
class="box-content-item out"
|
||||||
v-for="(item, index) in props.data"
|
v-for="(item, index) in outList"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<div class="out-left">
|
<div class="out-left">
|
||||||
|
|
@ -95,12 +110,13 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="name">剩余箱数</span>
|
<span class="name">剩余箱数</span>
|
||||||
<span>{{ item.remainCount }}</span>
|
<span>{{ item.leftNum }}箱</span>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span class="name">剩余投料量</span>
|
<span class="name">剩余投料量</span>
|
||||||
<span>{{ item.remainWeight }}kg</span>
|
<span>{{ item.remainWeight }}公斤</span>
|
||||||
</li>
|
</li>
|
||||||
|
<li style="opacity:0"></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -109,100 +125,118 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, defineProps } from "vue";
|
import { ref, defineProps,onMounted } from "vue";
|
||||||
import getPath from "@/utils/getPath";
|
import getPath from "@/utils/getPath";
|
||||||
|
import {getConOutOrder,getConInOrder} from '@/api/home'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
title: String,
|
title: String,
|
||||||
|
|
||||||
|
data: Array,
|
||||||
data:Array
|
|
||||||
});
|
});
|
||||||
const emit = defineEmits(["close"]);
|
const emit = defineEmits(["close"]);
|
||||||
const list = ref([
|
const list = ref([
|
||||||
{
|
// {
|
||||||
num: "1号",
|
// num: "1号",
|
||||||
line: "入库线",
|
// line: "入库线",
|
||||||
boxTotal: 62,
|
// boxTotal: 62,
|
||||||
workerNumber: "YZP2303022",
|
// workerNumber: "YZP2303022",
|
||||||
batchNumber: "YZP2303022Y5RKA",
|
// batchNumber: "YZP2303022Y5RKA",
|
||||||
brand: "兰州（硬珍品）烟丝",
|
// brand: "兰州（硬珍品）烟丝",
|
||||||
invName: "9737.37kg",
|
// invName: "9737.37kg",
|
||||||
stratTime: "2023-03-10 02:01",
|
// stratTime: "2023-03-10 02:01",
|
||||||
endTime: "2023-03-10 03:52",
|
// endTime: "2023-03-10 03:52",
|
||||||
packagedWeight: "9686.5kg",
|
// packagedWeight: "9686.5kg",
|
||||||
packingQuantity: "62",
|
// packingQuantity: "62",
|
||||||
status: "已完成",
|
// status: "已完成",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
num: "1号",
|
// num: "1号",
|
||||||
line: "入库线",
|
// line: "入库线",
|
||||||
boxTotal: 62,
|
// boxTotal: 62,
|
||||||
workerNumber: "YZP2303022",
|
// workerNumber: "YZP2303022",
|
||||||
batchNumber: "YZP2303022Y5RKA",
|
// batchNumber: "YZP2303022Y5RKA",
|
||||||
brand: "兰州（硬珍品）烟丝",
|
// brand: "兰州（硬珍品）烟丝",
|
||||||
invName: "9737.37kg",
|
// invName: "9737.37kg",
|
||||||
stratTime: "2023-03-10 02:01",
|
// stratTime: "2023-03-10 02:01",
|
||||||
endTime: "2023-03-10 03:52",
|
// endTime: "2023-03-10 03:52",
|
||||||
packagedWeight: "9686.5kg",
|
// packagedWeight: "9686.5kg",
|
||||||
packingQuantity: "62",
|
// packingQuantity: "62",
|
||||||
status: "已完成",
|
// status: "已完成",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
num: "1号",
|
// num: "1号",
|
||||||
line: "入库线",
|
// line: "入库线",
|
||||||
boxTotal: 62,
|
// boxTotal: 62,
|
||||||
workerNumber: "YZP2303022",
|
// workerNumber: "YZP2303022",
|
||||||
batchNumber: "YZP2303022Y5RKA",
|
// batchNumber: "YZP2303022Y5RKA",
|
||||||
brand: "兰州（硬珍品）烟丝",
|
// brand: "兰州（硬珍品）烟丝",
|
||||||
invName: "9737.37kg",
|
// invName: "9737.37kg",
|
||||||
stratTime: "2023-03-10 02:01",
|
// stratTime: "2023-03-10 02:01",
|
||||||
endTime: "2023-03-10 03:52",
|
// endTime: "2023-03-10 03:52",
|
||||||
packagedWeight: "9686.5kg",
|
// packagedWeight: "9686.5kg",
|
||||||
packingQuantity: "62",
|
// packingQuantity: "62",
|
||||||
status: "已完成",
|
// status: "已完成",
|
||||||
},
|
// },
|
||||||
]);
|
]);
|
||||||
const outList = ref([
|
const outList = ref([
|
||||||
{
|
// {
|
||||||
num: "S01",
|
// num: "S01",
|
||||||
line: "喂丝机",
|
// line: "喂丝机",
|
||||||
workerNumber: "YZP2303022",
|
// workerNumber: "YZP2303022",
|
||||||
brand: "兰州（硬珍品）烟丝",
|
// brand: "兰州（硬珍品）烟丝",
|
||||||
invName: "22494.37kg",
|
// invName: "22494.37kg",
|
||||||
startTime: "2023-03-10 02:01",
|
// startTime: "2023-03-10 02:01",
|
||||||
realityInventory: "4372.25",
|
// realityInventory: "4372.25",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
num: "S01",
|
// num: "S01",
|
||||||
line: "喂丝机",
|
// line: "喂丝机",
|
||||||
workerNumber: "YZP2303022",
|
// workerNumber: "YZP2303022",
|
||||||
brand: "兰州（硬珍品）烟丝",
|
// brand: "兰州（硬珍品）烟丝",
|
||||||
invName: "22494.37kg",
|
// invName: "22494.37kg",
|
||||||
startTime: "2023-03-10 02:01",
|
// startTime: "2023-03-10 02:01",
|
||||||
realityInventory: "4372.25",
|
// realityInventory: "4372.25",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
num: "S01",
|
// num: "S01",
|
||||||
line: "喂丝机",
|
// line: "喂丝机",
|
||||||
workerNumber: "YZP2303022",
|
// workerNumber: "YZP2303022",
|
||||||
brand: "兰州（硬珍品）烟丝",
|
// brand: "兰州（硬珍品）烟丝",
|
||||||
invName: "22494.37kg",
|
// invName: "22494.37kg",
|
||||||
startTime: "2023-03-10 02:01",
|
// startTime: "2023-03-10 02:01",
|
||||||
realityInventory: "4372.25",
|
// realityInventory: "4372.25",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
num: "S01",
|
// num: "S01",
|
||||||
line: "喂丝机",
|
// line: "喂丝机",
|
||||||
workerNumber: "YZP2303022",
|
// workerNumber: "YZP2303022",
|
||||||
brand: "兰州（硬珍品）烟丝",
|
// brand: "兰州（硬珍品）烟丝",
|
||||||
invName: "22494.37kg",
|
// invName: "22494.37kg",
|
||||||
startTime: "2023-03-10 02:01",
|
// startTime: "2023-03-10 02:01",
|
||||||
realityInventory: "4372.25",
|
// realityInventory: "4372.25",
|
||||||
},
|
// },
|
||||||
]);
|
]);
|
||||||
function close() {
|
function close() {
|
||||||
emit("close", false);
|
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>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.box {
|
.box {
|
||||||
|
|
@ -247,6 +281,7 @@ function close() {
|
||||||
// border-radius: 8px; /* 滑块的圆角 */
|
// border-radius: 8px; /* 滑块的圆角 */
|
||||||
}
|
}
|
||||||
&-content {
|
&-content {
|
||||||
|
font-size: 1rem;
|
||||||
padding: vh(20) vw(20);
|
padding: vh(20) vw(20);
|
||||||
height: vh(636 - 60);
|
height: vh(636 - 60);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -301,14 +336,15 @@ function close() {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-content: space-between;
|
align-content: space-between;
|
||||||
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
li {
|
li {
|
||||||
width: vw(232);
|
width: vw(232);
|
||||||
margin-right: vw(20);
|
// margin-right: vw(20);
|
||||||
padding-left: vw(32);
|
padding-left: vw(32);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: vh(64);
|
height: vh(64);
|
||||||
background: url("@/assets/images/dialog/inOutBound/border.png");
|
background: url("@/assets/images/dialog/border.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
.name {
|
.name {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -316,6 +352,13 @@ function close() {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
margin-bottom: vh(10);
|
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) {
|
li:nth-child(3n) {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="el-overlay">
|
<div class="el-overlay">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="box-header">
|
<div class="box-header">
|
||||||
<div class="box-title">消息提醒</div>
|
<div class="box-title">故障提醒</div>
|
||||||
<div class="box-btn" @click="close"></div>
|
<div class="box-btn" @click="close"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="box-content">
|
<div class="box-content">
|
||||||
|
|
@ -244,7 +244,7 @@ const editData = ref({});
|
||||||
// let {radio,value} = toRefs(editData)
|
// let {radio,value} = toRefs(editData)
|
||||||
function rowClick(row) {
|
function rowClick(row) {
|
||||||
editData.value = row;
|
editData.value = row;
|
||||||
dialogBoxShow.value = true;
|
// dialogBoxShow.value = true;
|
||||||
}
|
}
|
||||||
function closeDialogBox() {
|
function closeDialogBox() {
|
||||||
dialogBoxShow.value = false;
|
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>
|
<template>
|
||||||
|
<Nav />
|
||||||
<div class="unity">
|
<div class="unity">
|
||||||
<!-- <iframe src="model/index.html" frameborder="0"></iframe> -->
|
<iframe src="model/index.html" frameborder="0"></iframe>
|
||||||
</div>
|
</div>
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<div class="home-left">
|
<div class="home-left">
|
||||||
|
|
@ -28,20 +29,28 @@
|
||||||
<span class="home-title-more" @click="brandShow = true"> </span>
|
<span class="home-title-more" @click="brandShow = true"> </span>
|
||||||
</div>
|
</div>
|
||||||
<div class="home-left-brand" id="brand">
|
<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">
|
<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>
|
||||||
<div class="home-left-brand-progress">
|
<div class="home-left-brand-progress">
|
||||||
<div class="home-left-brand-bg" :style="'width:'+item.pct*100+'%'">
|
<div
|
||||||
|
class="home-left-brand-bg"
|
||||||
|
:style="'width:' + item.weightPercent + '%'"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- 故障提醒 -->
|
||||||
<!-- 消息提醒 -->
|
|
||||||
<div class="home-title">
|
<div class="home-title">
|
||||||
<span class="home-title-font"> 消息提醒 </span>
|
<span class="home-title-font"> 故障提醒 </span>
|
||||||
<span class="home-title-more" @click="openMsg"> </span>
|
<span class="home-title-more" @click="openMsg"> </span>
|
||||||
</div>
|
</div>
|
||||||
<div class="home-left-messageReminder">
|
<div class="home-left-messageReminder">
|
||||||
|
|
@ -104,9 +113,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="right-plate">
|
<div class="right-plate">
|
||||||
<p class="name">{{ item.itemDesc }}</p>
|
<p class="name">{{ item.itemDesc }}</p>
|
||||||
<p class="id">{{ item.currentBatch }}</p>
|
<!-- <p class="id">{{ item.currentBatch }}</p> -->
|
||||||
<p class="start-time">
|
<p class="start-time">
|
||||||
开始时间：<span>{{ item.creatTime }}</span>
|
<!-- 开始时间:<span> {{ item.creatTime }}</span> -->
|
||||||
|
剩余箱数：<span>{{ item.leftNum }}箱</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -133,18 +143,22 @@
|
||||||
>
|
>
|
||||||
<div class="left-plate">
|
<div class="left-plate">
|
||||||
<img :src="item.pic" alt="" />
|
<img :src="item.pic" alt="" />
|
||||||
<p class="name">装箱站{{ item.packStation }}号</p>
|
<p class="name">装箱站1号</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-plate">
|
<div class="right-plate">
|
||||||
<p class="name">{{ item.itemDesc }}</p>
|
<p class="name">{{ item.itemDesc }}</p>
|
||||||
<p class="id">{{ item.batch }}</p>
|
|
||||||
<p class="start-time">
|
<p class="start-time">
|
||||||
开始时间：<span>{{ item.creatTime }}</span>
|
计划重量：<span>{{ item.planWeight }}公斤</span>
|
||||||
|
</p>
|
||||||
|
<p class="start-time">
|
||||||
|
入库重量：<span>{{ item.inWeight }}公斤</span>
|
||||||
|
</p>
|
||||||
|
<p class="start-time">
|
||||||
|
入库箱数：<span>{{ item.inNum }}箱</span>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="home-bottom">
|
<div class="home-bottom">
|
||||||
|
|
@ -163,7 +177,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 消息提醒弹窗 -->
|
<!-- 故障提醒弹窗 -->
|
||||||
<messageDialog v-if="isOpen" @closeMsg="closeMsg" />
|
<messageDialog v-if="isOpen" @closeMsg="closeMsg" />
|
||||||
<!-- 各品牌库存弹窗 -->
|
<!-- 各品牌库存弹窗 -->
|
||||||
<brand v-if="brandShow" @closeBrand="closeBrand" />
|
<brand v-if="brandShow" @closeBrand="closeBrand" />
|
||||||
|
|
@ -180,13 +194,17 @@
|
||||||
<equipmentManagement v-if="asideListIndex === 1" @closeDialog="closeDialog" />
|
<equipmentManagement v-if="asideListIndex === 1" @closeDialog="closeDialog" />
|
||||||
<!-- 生产信息弹窗 -->
|
<!-- 生产信息弹窗 -->
|
||||||
<devData v-if="asideListIndex === 0" @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>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import Nav from "@/views/home/components/layout.vue";
|
||||||
import devData from "./components/aside/devData"; //生产信息
|
import devData from "./components/aside/devData"; //生产信息
|
||||||
import equipmentManagement from "./components/aside/equipmentManagement"; // 设备管理
|
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 brand from "./components/homeDialog/brand"; //各品牌库存管理
|
||||||
import messageDialog from "./components/homeDialog/messageDialog"; //消息提醒
|
import messageDialog from "./components/homeDialog/messageDialog"; //消息提醒
|
||||||
|
|
@ -204,19 +222,17 @@ import {
|
||||||
getInOrder,
|
getInOrder,
|
||||||
getOutOrder,
|
getOutOrder,
|
||||||
getLocInfo,
|
getLocInfo,
|
||||||
|
|
||||||
} from "@/api/home";
|
} from "@/api/home";
|
||||||
|
import { fontSize } from "@/utils/common";
|
||||||
// 设备状态列表
|
// 设备状态列表
|
||||||
const deviceList = ref([
|
const deviceList = ref([
|
||||||
{
|
{
|
||||||
deviceStatus: "运行设备",
|
deviceStatus: "运行设备",
|
||||||
deviceNum: 1889,
|
|
||||||
deviceImg: getPath.operatingEquipment1,
|
deviceImg: getPath.operatingEquipment1,
|
||||||
color: "color:rgba(164, 255, 236, 1)",
|
color: "color:rgba(164, 255, 236, 1)",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
deviceStatus: "设备故障",
|
deviceStatus: "设备故障",
|
||||||
deviceNum: 26,
|
|
||||||
deviceImg: getPath.equipmentFailure1,
|
deviceImg: getPath.equipmentFailure1,
|
||||||
color: "color:rgba(255, 244, 166, 1)",
|
color: "color:rgba(255, 244, 166, 1)",
|
||||||
},
|
},
|
||||||
|
|
@ -293,7 +309,7 @@ function darwBrandChart(data) {
|
||||||
show: true,
|
show: true,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: "14",
|
fontSize: "0.875rem",
|
||||||
},
|
},
|
||||||
formatter: function (value, index) {
|
formatter: function (value, index) {
|
||||||
return "{a|" + value + "}";
|
return "{a|" + value + "}";
|
||||||
|
|
@ -302,7 +318,7 @@ function darwBrandChart(data) {
|
||||||
a: {
|
a: {
|
||||||
width: 45,
|
width: 45,
|
||||||
padding: [0, 0, 3, 0],
|
padding: [0, 0, 3, 0],
|
||||||
fontSize: "14",
|
fontSize: "0.875rem",
|
||||||
// backgroundColor: {
|
// backgroundColor: {
|
||||||
// image: getImageUrl("../../assets/images/rank-bg.png"),
|
// image: getImageUrl("../../assets/images/rank-bg.png"),
|
||||||
// },
|
// },
|
||||||
|
|
@ -410,23 +426,34 @@ const searchData = ref();
|
||||||
// 库存消息的echarts
|
// 库存消息的echarts
|
||||||
function drawInventoryNewsEcahrt(result) {
|
function drawInventoryNewsEcahrt(result) {
|
||||||
let myChart = echarts.init(document.getElementById("inventoryNews"));
|
let myChart = echarts.init(document.getElementById("inventoryNews"));
|
||||||
|
console.log(result,'xxxxxxxxxxx');
|
||||||
var scaleData = [
|
var scaleData = [
|
||||||
{
|
// {
|
||||||
name: "货位",
|
// name: "货位",
|
||||||
value: 1174,
|
// value: 1174,
|
||||||
radius1: ['51%', '53%'],
|
// radius1: ["51%", "53%"],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: "实箱",
|
// name: "实箱",
|
||||||
value: 1101,
|
// value: 1101,
|
||||||
radius1: ["59%", "60%"],
|
// radius1: ["59%", "60%"],
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: "空箱",
|
// name: "空箱",
|
||||||
value: 68,
|
// value: 68,
|
||||||
radius1: ["67%", "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) => {
|
scaleData.forEach((el) => {
|
||||||
for (let key in result) {
|
for (let key in result) {
|
||||||
|
|
@ -497,8 +524,8 @@ function drawInventoryNewsEcahrt(result) {
|
||||||
type: "image",
|
type: "image",
|
||||||
style: {
|
style: {
|
||||||
image: getPath.homeIcon, // 图片地址
|
image: getPath.homeIcon, // 图片地址
|
||||||
width: 50,
|
width: fontSize(0.5),
|
||||||
height: 50,
|
height: fontSize(0.5),
|
||||||
},
|
},
|
||||||
// left: '18.5%',
|
// left: '18.5%',
|
||||||
left: "17.5%", // 【主要代码1】
|
left: "17.5%", // 【主要代码1】
|
||||||
|
|
@ -513,29 +540,28 @@ function drawInventoryNewsEcahrt(result) {
|
||||||
legend: {
|
legend: {
|
||||||
icon: "circle",
|
icon: "circle",
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
x: "58%",
|
x: "60%",
|
||||||
y: "center",
|
y: "center",
|
||||||
itemWidth: 10,
|
itemWidth: fontSize(0.1),
|
||||||
itemHeight: 10,
|
itemHeight: fontSize(0.1),
|
||||||
itemGap: 40,
|
itemGap: fontSize(0.2),
|
||||||
data: scaleData.map((el) => {
|
data: scaleData.map((el) => {
|
||||||
return el.name;
|
return el.name;
|
||||||
}),
|
}),
|
||||||
show: true,
|
show: true,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: "14",
|
fontSize: "1rem",
|
||||||
rich: {
|
rich: {
|
||||||
name: {
|
name: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
|
fontSize: "0.875rem",
|
||||||
fontSize: "14",
|
|
||||||
},
|
},
|
||||||
val: {
|
val: {
|
||||||
fontSize: "16",
|
fontSize: ".875rem",
|
||||||
textAlign: "right",
|
textAlign: "right",
|
||||||
width: "40",
|
// width: "40",
|
||||||
padding: [0, 0, 0, 50],
|
padding: [0, 0, 0, 10],
|
||||||
color: color[i],
|
color: color[i],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -559,55 +585,114 @@ function drawInventoryNewsEcahrt(result) {
|
||||||
// 添加 resize 事件处理程序
|
// 添加 resize 事件处理程序
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener("resize", function () {
|
||||||
myChart.resize(); // 调用 resize 函数进行自适应大小调整
|
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([
|
const outboundWorkOrder = ref([
|
||||||
{
|
// {
|
||||||
name: "利群（长嘴）烟丝",
|
// name: "利群（长嘴）烟丝",
|
||||||
id: "JB17225LQ（CZ）02",
|
// id: "JB17225LQ（CZ）02",
|
||||||
startTime: "08:21",
|
// startTime: "08:21",
|
||||||
pic: getPath.outDevice,
|
// pic: getPath.outDevice,
|
||||||
picName: "S08喂丝机",
|
// picName: "S08喂丝机",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: "利群（长嘴）烟丝",
|
// name: "利群（长嘴）烟丝",
|
||||||
id: "JB17225LQ（CZ）02",
|
// id: "JB17225LQ（CZ）02",
|
||||||
startTime: "08:21",
|
// startTime: "08:21",
|
||||||
pic: getPath.outDevice,
|
// pic: getPath.outDevice,
|
||||||
picName: "S08喂丝机",
|
// picName: "S08喂丝机",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: "利群（长嘴）烟丝",
|
// name: "利群（长嘴）烟丝",
|
||||||
id: "JB17225LQ（CZ）02",
|
// id: "JB17225LQ（CZ）02",
|
||||||
startTime: "08:21",
|
// startTime: "08:21",
|
||||||
pic: getPath.outDevice,
|
// pic: getPath.outDevice,
|
||||||
picName: "S08喂丝机",
|
// picName: "S08喂丝机",
|
||||||
},
|
// },
|
||||||
]);
|
]);
|
||||||
// 入库工单
|
// 入库工单
|
||||||
const inboundWorkOrder = ref([
|
const inboundWorkOrder = ref([
|
||||||
{
|
// {
|
||||||
name: "利群（长嘴）烟丝",
|
// name: "利群（长嘴）烟丝",
|
||||||
id: "JB17225LQ（CZ）02",
|
// id: "JB17225LQ（CZ）02",
|
||||||
startTime: "08:21",
|
// startTime: "08:21",
|
||||||
pic: getPath.inDevice,
|
// pic: getPath.inDevice,
|
||||||
picName: "S08喂丝机",
|
// picName: "S08喂丝机",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: "利群（长嘴）烟丝",
|
// name: "利群（长嘴）烟丝",
|
||||||
id: "JB17225LQ（CZ）02",
|
// id: "JB17225LQ（CZ）02",
|
||||||
startTime: "08:21",
|
// startTime: "08:21",
|
||||||
pic: getPath.inDevice,
|
// pic: getPath.inDevice,
|
||||||
picName: "S08喂丝机",
|
// picName: "S08喂丝机",
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: "利群（长嘴）烟丝",
|
// name: "利群（长嘴）烟丝",
|
||||||
id: "JB17225LQ（CZ）02",
|
// id: "JB17225LQ（CZ）02",
|
||||||
startTime: "08:21",
|
// startTime: "08:21",
|
||||||
pic: getPath.inDevice,
|
// pic: getPath.inDevice,
|
||||||
picName: "S08喂丝机",
|
// picName: "S08喂丝机",
|
||||||
},
|
// },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const asideList = ref([
|
const asideList = ref([
|
||||||
|
|
@ -619,6 +704,10 @@ const asideList = ref([
|
||||||
default: getPath.deviceDefault,
|
default: getPath.deviceDefault,
|
||||||
select: getPath.deviceSelect,
|
select: getPath.deviceSelect,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
default: getPath.batteryManagementDefault,
|
||||||
|
select: getPath.batteryManagementSelect,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
default: getPath.operationDefault,
|
default: getPath.operationDefault,
|
||||||
select: getPath.operationSelect,
|
select: getPath.operationSelect,
|
||||||
|
|
@ -678,23 +767,24 @@ function getDeviceStatus() {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const brandList = ref([])
|
const brandList = ref([]);
|
||||||
// 各品牌库存情况接口方法
|
// 各品牌库存情况接口方法
|
||||||
function getBrandData() {
|
function getBrandData() {
|
||||||
getInventoryInfo().then((res) => {
|
getInventoryInfo().then((res) => {
|
||||||
// darwBrandChart(res.result);
|
// darwBrandChart(res.result);
|
||||||
for(let key in res.result[1]){
|
// for (let key in res.result[1]) {
|
||||||
brandList.value.push({
|
// brandList.value.push({
|
||||||
pct:res.result[1][key],
|
// pct: res.result[1][key],
|
||||||
name:key
|
// name: key,
|
||||||
})
|
// });
|
||||||
}
|
// }
|
||||||
|
brandList.value = res.result;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// 消息提醒
|
// 消息提醒
|
||||||
async function getMessageReminder() {
|
async function getMessageReminder() {
|
||||||
await getCarErrorIn12().then((res) => {
|
await getCarErrorIn12().then((res) => {
|
||||||
res.result.forEach((el) => {
|
res.result.slice(0, 1).forEach((el) => {
|
||||||
el.msg = "维修提醒";
|
el.msg = "维修提醒";
|
||||||
el.reminderMsg = el.facName + el.facCode + " 需要维修";
|
el.reminderMsg = el.facName + el.facCode + " 需要维修";
|
||||||
el.date = el.errorDateTime;
|
el.date = el.errorDateTime;
|
||||||
|
|
@ -702,7 +792,7 @@ async function getMessageReminder() {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
await getOverTransmission().then((res) => {
|
await getOverTransmission().then((res) => {
|
||||||
res.result.forEach((el) => {
|
res.result.slice(0, 1).forEach((el) => {
|
||||||
el.msg = "超时提醒";
|
el.msg = "超时提醒";
|
||||||
el.reminderMsg = el.itemDesc + el.palletNum + " 任务超时";
|
el.reminderMsg = el.itemDesc + el.palletNum + " 任务超时";
|
||||||
el.date = el.startDate;
|
el.date = el.startDate;
|
||||||
|
|
@ -747,6 +837,10 @@ onMounted(() => {
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.kg {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-left: 0.2rem;
|
||||||
|
}
|
||||||
.unity {
|
.unity {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -815,6 +909,7 @@ onMounted(() => {
|
||||||
margin-right: vw(10);
|
margin-right: vw(10);
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
|
font-size: 1rem;
|
||||||
margin-top: vh(15);
|
margin-top: vh(15);
|
||||||
margin-bottom: vh(5);
|
margin-bottom: vh(5);
|
||||||
}
|
}
|
||||||
|
|
@ -824,10 +919,10 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-brand>div{
|
&-brand > div {
|
||||||
margin-bottom: vh(24);
|
margin-bottom: vh(24);
|
||||||
}
|
}
|
||||||
&-brand::-webkit-scrollbar{
|
&-brand::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
&-brand {
|
&-brand {
|
||||||
|
|
@ -835,29 +930,30 @@ onMounted(() => {
|
||||||
padding: vh(23) vw(10);
|
padding: vh(23) vw(10);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: vh(388);
|
height: vh(388);
|
||||||
&-progress{
|
&-progress {
|
||||||
background-color: rgba(112, 112, 112, 0.23);
|
background-color: rgba(112, 112, 112, 0.23);
|
||||||
height: vh(8);
|
height: vh(8);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
}
|
}
|
||||||
&-title{
|
&-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: vh(10);
|
margin-bottom: vh(10);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
.pct{
|
.pct {
|
||||||
font-size:1rem;color:rgba(144, 218, 255, 1);font-weight:700
|
font-size: 1rem;
|
||||||
|
color: rgba(144, 218, 255, 1);
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-bg{
|
&-bg {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: linear-gradient( 79deg, #19AEFA 0%, #94DBFF 100%);
|
background: linear-gradient(79deg, #19aefa 0%, #94dbff 100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-messageReminder {
|
&-messageReminder {
|
||||||
|
|
@ -873,6 +969,7 @@ onMounted(() => {
|
||||||
&-search {
|
&-search {
|
||||||
:deep(.el-input__inner) {
|
:deep(.el-input__inner) {
|
||||||
height: vh(40);
|
height: vh(40);
|
||||||
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
:deep(.el-input__wrapper) {
|
:deep(.el-input__wrapper) {
|
||||||
background-image: url("@/assets/images/home/search-input.png");
|
background-image: url("@/assets/images/home/search-input.png");
|
||||||
|
|
@ -891,21 +988,22 @@ onMounted(() => {
|
||||||
&-outboundWorkOrder,
|
&-outboundWorkOrder,
|
||||||
&-inboundWorkOrder {
|
&-inboundWorkOrder {
|
||||||
height: vh(388);
|
height: vh(388);
|
||||||
padding: vh(20) vw(30);
|
padding: vh(20) vw(20);
|
||||||
// overflow-y: scroll;
|
// overflow-y: scroll;
|
||||||
// display: flex;
|
// display: flex;
|
||||||
// flex-wrap: wrap;
|
// flex-wrap: wrap;
|
||||||
// align-content: space-between;
|
// align-content: space-between;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
&-inboundWorkOrder{
|
&-inboundWorkOrder {
|
||||||
height: vh(205);
|
height: vh(205);
|
||||||
}
|
}
|
||||||
&-outboundWorkOrder-content::-webkit-scrollbar,
|
&-outboundWorkOrder-content::-webkit-scrollbar,
|
||||||
&-inboundWorkOrder-content::-webkit-scrollbar {
|
&-inboundWorkOrder-content::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
&-outboundWorkOrder-content,&-inboundWorkOrder-content{
|
&-outboundWorkOrder-content,
|
||||||
|
&-inboundWorkOrder-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
|
@ -917,14 +1015,23 @@ onMounted(() => {
|
||||||
.left-plate {
|
.left-plate {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: vw(32);
|
margin-right: vw(30);
|
||||||
img{
|
img {
|
||||||
width: vw(47);
|
width: vw(47);
|
||||||
height:vh(41)
|
height: vh(41);
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
width: vw(65);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right-plate {
|
.right-plate {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-content: space-around;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
p {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
.id {
|
.id {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: rgba(144, 218, 255, 1);
|
color: rgba(144, 218, 255, 1);
|
||||||
|
|
@ -968,13 +1075,16 @@ onMounted(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
li {
|
li {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: vw(242);
|
width: vw(179);
|
||||||
height: vh(38);
|
height: vh(38);
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
li:nth-child(2) {
|
li:nth-child(2) {
|
||||||
margin: 0 0.625rem;
|
margin: 0 0.625rem;
|
||||||
}
|
}
|
||||||
|
li:nth-child(3) {
|
||||||
|
margin-right: 0.625rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
:deep(.el-timeline-item__wrapper) {
|
:deep(.el-timeline-item__wrapper) {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
|
<Nav />
|
||||||
<div class="login-page">
|
<div class="login-page">
|
||||||
<div class="login-form">
|
<div class="login-form">
|
||||||
<div class="login-form-title">
|
<div class="login-form-title">
|
||||||
|
|
@ -57,6 +58,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import Nav from '@/views/home/components/layout.vue'
|
||||||
import { ref, reactive, onMounted, watch } from "vue";
|
import { ref, reactive, onMounted, watch } from "vue";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
|
|
@ -138,6 +140,7 @@ watch(ruleForm, (newVal, oldVal) => {
|
||||||
.login-page {
|
.login-page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
// background-color: #000;
|
||||||
background-image: url("@/assets/images/login/login-bg.png");
|
background-image: url("@/assets/images/login/login-bg.png");
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
import path from "path";
|
import path from "path";
|
||||||
|
import pxtorem from "postcss-pxtorem";
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [vue()],
|
plugins: [vue()],
|
||||||
|
|
@ -23,7 +23,7 @@ export default defineConfig({
|
||||||
proxy: {
|
proxy: {
|
||||||
// https://cn.vitejs.dev/config/#server-proxy
|
// https://cn.vitejs.dev/config/#server-proxy
|
||||||
'/dev-api': {
|
'/dev-api': {
|
||||||
target: 'http://172.16.1.104:5005/',
|
target: 'http://172.16.1.106:5005/',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (p) => p.replace(/^\/dev-api/, '')
|
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