代码提交
This commit is contained in:
parent
3b09dddae8
commit
a29153de74
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
|
|
@ -0,0 +1 @@
|
||||||
|
{"Keys":["com.unity.services.core.version"],"Values":[{"m_Value":"1.3.1","m_IsReadOnly":true}]}
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 B |
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
Binary file not shown.
|
After Width: | Height: | Size: 109 B |
Binary file not shown.
|
After Width: | Height: | Size: 74 B |
Binary file not shown.
|
After Width: | Height: | Size: 84 B |
|
|
@ -0,0 +1,16 @@
|
||||||
|
body { padding: 0; margin: 0 }
|
||||||
|
#unity-container { position: absolute }
|
||||||
|
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
|
||||||
|
#unity-container.unity-mobile { width: 100%; height: 100% }
|
||||||
|
#unity-canvas { background: #231F20 }
|
||||||
|
.unity-mobile #unity-canvas { width: 100%; height: 100% }
|
||||||
|
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
|
||||||
|
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
|
||||||
|
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
|
||||||
|
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
|
||||||
|
#unity-footer { position: relative }
|
||||||
|
.unity-mobile #unity-footer { display: none }
|
||||||
|
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
|
||||||
|
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
|
||||||
|
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
|
||||||
|
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
|
|
@ -0,0 +1,172 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en-us">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>Unity WebGL Player | ElectricPowerStorage_Digital Twin</title>
|
||||||
|
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||||
|
<link rel="stylesheet" href="TemplateData/style.css">
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="unity-container" style="width: 100%;height: 100%;" class="unity-desktop">
|
||||||
|
<canvas id="unity-canvas" style="width: 100%;height: 100%;"></canvas>
|
||||||
|
<div id="unity-loading-bar">
|
||||||
|
<div id="unity-logo"></div>
|
||||||
|
<div id="unity-progress-bar-empty">
|
||||||
|
<div id="unity-progress-bar-full"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="unity-warning"> </div>
|
||||||
|
<div id="unity-footer">
|
||||||
|
<div id="unity-webgl-logo"></div>
|
||||||
|
<div id="unity-fullscreen-button"></div>
|
||||||
|
<div id="unity-build-title">ElectricPowerStorage_Digital Twin</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
var container = document.querySelector("#unity-container");
|
||||||
|
var canvas = document.querySelector("#unity-canvas");
|
||||||
|
var loadingBar = document.querySelector("#unity-loading-bar");
|
||||||
|
var progressBarFull = document.querySelector("#unity-progress-bar-full");
|
||||||
|
var fullscreenButton = document.querySelector("#unity-fullscreen-button");
|
||||||
|
var warningBanner = document.querySelector("#unity-warning");
|
||||||
|
|
||||||
|
// Shows a temporary message banner/ribbon for a few seconds, or
|
||||||
|
// a permanent error message on top of the canvas if type=='error'.
|
||||||
|
// If type=='warning', a yellow highlight color is used.
|
||||||
|
// Modify or remove this function to customize the visually presented
|
||||||
|
// way that non-critical warnings and error messages are presented to the
|
||||||
|
// user.
|
||||||
|
function unityShowBanner(msg, type) {
|
||||||
|
function updateBannerVisibility() {
|
||||||
|
warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
var div = document.createElement('div');
|
||||||
|
div.innerHTML = msg;
|
||||||
|
warningBanner.appendChild(div);
|
||||||
|
if (type == 'error') div.style = 'background: red; padding: 10px;';
|
||||||
|
else {
|
||||||
|
if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
|
||||||
|
setTimeout(function () {
|
||||||
|
warningBanner.removeChild(div);
|
||||||
|
updateBannerVisibility();
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
updateBannerVisibility();
|
||||||
|
}
|
||||||
|
|
||||||
|
var buildUrl = "Build";
|
||||||
|
var loaderUrl = buildUrl + "/EPS_Yzpq.loader.js";
|
||||||
|
var config = {
|
||||||
|
dataUrl: buildUrl + "/EPS_Yzpq.data.unityweb",
|
||||||
|
frameworkUrl: buildUrl + "/EPS_Yzpq.framework.js.unityweb",
|
||||||
|
codeUrl: buildUrl + "/EPS_Yzpq.wasm.unityweb",
|
||||||
|
streamingAssetsUrl: "StreamingAssets",
|
||||||
|
companyName: "DefaultCompany",
|
||||||
|
productName: "ElectricPowerStorage_Digital Twin",
|
||||||
|
productVersion: "0.1.0",
|
||||||
|
showBanner: unityShowBanner,
|
||||||
|
};
|
||||||
|
|
||||||
|
// By default Unity keeps WebGL canvas render target size matched with
|
||||||
|
// the DOM size of the canvas element (scaled by window.devicePixelRatio)
|
||||||
|
// Set this to false if you want to decouple this synchronization from
|
||||||
|
// happening inside the engine, and you would instead like to size up
|
||||||
|
// the canvas DOM size and WebGL render target sizes yourself.
|
||||||
|
// config.matchWebGLToCanvasSize = false;
|
||||||
|
|
||||||
|
if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
|
||||||
|
// Mobile device style: fill the whole browser client area with the game canvas:
|
||||||
|
|
||||||
|
var meta = document.createElement('meta');
|
||||||
|
meta.name = 'viewport';
|
||||||
|
meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
|
||||||
|
document.getElementsByTagName('head')[0].appendChild(meta);
|
||||||
|
container.className = "unity-mobile";
|
||||||
|
|
||||||
|
// To lower canvas resolution on mobile devices to gain some
|
||||||
|
// performance, uncomment the following line:
|
||||||
|
// config.devicePixelRatio = 1;
|
||||||
|
|
||||||
|
canvas.style.width = window.innerWidth + 'px';
|
||||||
|
canvas.style.height = window.innerHeight + 'px';
|
||||||
|
|
||||||
|
unityShowBanner('WebGL builds are not supported on mobile devices.');
|
||||||
|
} else {
|
||||||
|
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||||
|
|
||||||
|
// canvas.style.width = "960px";
|
||||||
|
// canvas.style.height = "600px";
|
||||||
|
}
|
||||||
|
|
||||||
|
loadingBar.style.display = "block";
|
||||||
|
|
||||||
|
var script = document.createElement("script");
|
||||||
|
var unityInstanceA
|
||||||
|
script.src = loaderUrl;
|
||||||
|
script.onload = () => {
|
||||||
|
createUnityInstance(canvas, config, (progress) => {
|
||||||
|
progressBarFull.style.width = 100 * progress + "%";
|
||||||
|
}).then((unityInstance) => {
|
||||||
|
unityInstanceA = unityInstance
|
||||||
|
loadingBar.style.display = "none";
|
||||||
|
fullscreenButton.onclick = () => {
|
||||||
|
unityInstance.SetFullscreen(1);
|
||||||
|
};
|
||||||
|
}).catch((message) => {
|
||||||
|
alert(message);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
document.body.appendChild(script);
|
||||||
|
|
||||||
|
// c仓位号查询
|
||||||
|
// function wareHouse(){
|
||||||
|
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// 定位货架位置
|
||||||
|
function shelvesList(val){
|
||||||
|
// console.log(val,'unity');
|
||||||
|
// unityInstanceA.Unity_ShelvesList(val)
|
||||||
|
unityInstanceA.SendMessage("Manager","Unity_ShelvesList",val);
|
||||||
|
}
|
||||||
|
// 视角切换
|
||||||
|
function updateScene(val){
|
||||||
|
// console.log(val,'unity');
|
||||||
|
unityInstanceA.SendMessage("Manager","Unity_ViewportChange",val+'');
|
||||||
|
}
|
||||||
|
// 库房的定位
|
||||||
|
function selectHome(val){
|
||||||
|
// console.log(val,'库房的定位');
|
||||||
|
unityInstanceA.SendMessage("Manager","Unity_WarehouseList",val);
|
||||||
|
}
|
||||||
|
// 库外的按钮
|
||||||
|
function outHome(){
|
||||||
|
// console.log(5);
|
||||||
|
unityInstanceA.SendMessage("Manager","Unity_OutWarehouse",'');
|
||||||
|
}
|
||||||
|
// 转运
|
||||||
|
function transport(val){
|
||||||
|
// console.log('转运',val);
|
||||||
|
unityInstanceA.SendMessage("Manager","Unity_Transport",val+'');
|
||||||
|
}
|
||||||
|
// 显隐
|
||||||
|
function hide(val){
|
||||||
|
// console.log('显隐',val);
|
||||||
|
unityInstanceA.SendMessage("Manager","Unity_Transparence",val+'');
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title>扬中数字孪生仓库</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|
|
||||||
148
src/App.vue
148
src/App.vue
|
|
@ -1,6 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<iframe id="iframe" src="" frameborder="0"></iframe>
|
<!-- unity3D -->
|
||||||
|
<iframe id="iframe" ref="dome" width="100%" height="100%" src="EPS_Yzpq/index.html" frameborder="0"></iframe>
|
||||||
|
<!-- 头部 -->
|
||||||
<header class="nav">
|
<header class="nav">
|
||||||
<div class="wether">
|
<div class="wether">
|
||||||
<img src="@/assets/images/cloudy.png" alt="">
|
<img src="@/assets/images/cloudy.png" alt="">
|
||||||
|
|
@ -13,12 +15,48 @@
|
||||||
<el-input placeholder="请输入" v-model="input3">
|
<el-input placeholder="请输入" v-model="input3">
|
||||||
<i slot="suffix" class="el-input__icon el-icon-search"></i>
|
<i slot="suffix" class="el-input__icon el-icon-search"></i>
|
||||||
</el-input>
|
</el-input>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="s in liImgs" class="nav-li">
|
<li v-for="(s, i) in liImgs" class="nav-li" :key="i" @click="handleBtn(i)">
|
||||||
<img :src="s.img" alt="">
|
<el-dropdown trigger="click" placement="bottom" v-if="i == 0" :hide-on-click="true">
|
||||||
|
<img :src="s.img" alt="">
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
|
||||||
|
<ul class="menuContent">
|
||||||
|
<li v-for="(num, index) in 15" :key="index" @click="shelfHanlder($event)">LD1_B01-{{ num < 10 ? '0' + num
|
||||||
|
: num }}</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="menuContent">
|
||||||
|
<li v-for="(num, index) in 9" :key="index + 1" @click="shelfHanlder($event)">LD1_C01-{{ num < 10 ? '0' +
|
||||||
|
num : num }}</li>
|
||||||
|
<li @click="shelfHanlder($event)">LD1_C02-01</li>
|
||||||
|
<li @click="shelfHanlder($event)">LD1_C03-01</li>
|
||||||
|
</ul>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
|
||||||
|
</el-dropdown>
|
||||||
|
|
||||||
|
|
||||||
|
<el-dropdown trigger="click" placement="bottom" v-else-if="i == 2" :hide-on-click="true">
|
||||||
|
<img :src="s.img" alt="">
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<ul class="menuContent">
|
||||||
|
<li @click="selectHomeN($event)">B01</li>
|
||||||
|
<li @click="selectHomeN($event)">C01</li>
|
||||||
|
<li @click="selectHomeN($event)">C02</li>
|
||||||
|
<li @click="selectHomeN($event)">C03</li>
|
||||||
|
</ul>
|
||||||
|
<!-- <el-dropdown-item @click="selectHomeN($event)">B01</el-dropdown-item>
|
||||||
|
<el-dropdown-item @click="selectHomeN($event)">C01</el-dropdown-item>
|
||||||
|
<el-dropdown-item @click="selectHomeN($event)">C02</el-dropdown-item>
|
||||||
|
<el-dropdown-item @click="selectHomeN($event)">C03</el-dropdown-item> -->
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
<img v-else :src="s.img" alt="">
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</header>
|
</header>
|
||||||
|
<!-- 右侧边栏 -->
|
||||||
<aside class="right-aside">
|
<aside class="right-aside">
|
||||||
<span v-for="(s, i) in heatList" :class="`span${i}`" :key="i">
|
<span v-for="(s, i) in heatList" :class="`span${i}`" :key="i">
|
||||||
{{ s }}
|
{{ s }}
|
||||||
|
|
@ -42,24 +80,69 @@ export default {
|
||||||
{ img: require('@/assets/images/6.png') }
|
{ img: require('@/assets/images/6.png') }
|
||||||
],
|
],
|
||||||
options: [{
|
options: [{
|
||||||
value: '选项1',
|
value: '物资批次',
|
||||||
label: '黄金糕'
|
label: '物资批次'
|
||||||
}, {
|
}, {
|
||||||
value: '选项2',
|
value: '物料编码',
|
||||||
label: '双皮奶'
|
label: '物料编码'
|
||||||
}, {
|
}, {
|
||||||
value: '选项3',
|
value: '仓位号',
|
||||||
label: '蚵仔煎'
|
label: '仓位号'
|
||||||
}, {
|
|
||||||
value: '选项4',
|
|
||||||
label: '龙须面'
|
|
||||||
}, {
|
|
||||||
value: '选项5',
|
|
||||||
label: '北京烤鸭'
|
|
||||||
}],
|
}],
|
||||||
value: '仓位号',
|
value: '仓位号',
|
||||||
|
|
||||||
input3: '',
|
input3: '',
|
||||||
|
state: false,
|
||||||
|
// 转运
|
||||||
|
transport: false,
|
||||||
|
// 显隐
|
||||||
|
hide: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
// window.parent.shelvesList = this.shelfHanlder
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
shelfHanlder(e) {
|
||||||
|
// console.log();
|
||||||
|
e.currentTarget.parentElement.parentElement.style.display = 'none'
|
||||||
|
this.$refs.dome.contentWindow.shelvesList(e.currentTarget.innerHTML)
|
||||||
|
console.log(e.currentTarget.innerHTML, '货架列表');
|
||||||
|
},
|
||||||
|
// 库房的定位
|
||||||
|
selectHomeN(e) {
|
||||||
|
e.currentTarget.parentElement.parentElement.style.display = 'none'
|
||||||
|
console.log(e.currentTarget.innerHTML, '库房的定位');
|
||||||
|
this.$refs.dome.contentWindow.selectHome(e.currentTarget.innerHTML)
|
||||||
|
},
|
||||||
|
handleBtn(i) {
|
||||||
|
if (i == 1) {
|
||||||
|
this.state = !this.state
|
||||||
|
console.log(this.state);
|
||||||
|
this.$refs.dome.contentWindow.updateScene(this.state)
|
||||||
|
} else if (i == 3) {
|
||||||
|
this.$refs.dome.contentWindow.outHome()
|
||||||
|
} else if (i == 4) {
|
||||||
|
this.transport = !this.transport
|
||||||
|
this.$refs.dome.contentWindow.transport(this.transport)
|
||||||
|
} else if (i == 5) {
|
||||||
|
this.hide = !this.hide
|
||||||
|
this.$refs.dome.contentWindow.hide(this.hide)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(newVal, oldVal) {
|
||||||
|
if (newVal == '仓位号') {
|
||||||
|
// this.$refs.dome.contentWindow.shelvesList(input3)
|
||||||
|
} else if (newVal == '物料编码') {
|
||||||
|
// this.$refs.dome.contentWindow.shelvesList(input3)
|
||||||
|
} else if (newVal == '物料批次') {
|
||||||
|
// this.$refs.dome.contentWindow.shelvesList(input3)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -68,9 +151,11 @@ export default {
|
||||||
/deep/ .el-input__inner {
|
/deep/ .el-input__inner {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
border-color: transparent !important;
|
border-color: transparent !important;
|
||||||
|
color:#fff !important;
|
||||||
|
}
|
||||||
|
/deep/ .el-input__inner::placeholder {
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .el-select {
|
/deep/ .el-select {
|
||||||
width: 13%;
|
width: 13%;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
|
|
@ -78,7 +163,7 @@ export default {
|
||||||
|
|
||||||
/deep/ .el-select>.el-input {
|
/deep/ .el-select>.el-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .el-input {
|
/deep/ .el-input {
|
||||||
|
|
@ -105,6 +190,8 @@ html {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -150,14 +237,34 @@ html {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
|
cursor: pointer;
|
||||||
// background-color: rgba(35, 95, 156, 0.2);
|
// background-color: rgba(35, 95, 156, 0.2);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
box-shadow: 0 0 10px #5d8cad;
|
box-shadow: 0 0 10px #5d8cad;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.menuContent {
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding: 0 20px;
|
||||||
|
line-height: 36px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
li:hover {
|
||||||
|
background-color: #ecf5ff;
|
||||||
|
color: #66b1ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.right-aside {
|
.right-aside {
|
||||||
width: 4.7%;
|
width: 4.7%;
|
||||||
height: 34.6%;
|
height: 34.6%;
|
||||||
|
|
@ -175,6 +282,8 @@ html {
|
||||||
left: 8%;
|
left: 8%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-family: quare;
|
font-family: quare;
|
||||||
|
|
||||||
|
// cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.span0 {
|
.span0 {
|
||||||
|
|
@ -195,4 +304,5 @@ html {
|
||||||
|
|
||||||
// display: flex;
|
// display: flex;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
}</style>
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
// 测试请求是否能跨域
|
||||||
|
export const getWather = (params) => {
|
||||||
|
return axios.get('api/Handler/Weather.ashx', {
|
||||||
|
params
|
||||||
|
})
|
||||||
|
};
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 728 B |
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'EnterStore',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<div class="manageBox">
|
||||||
|
<div class="onlineCamera">
|
||||||
|
<div class="title">
|
||||||
|
在线摄像头列表
|
||||||
|
</div>
|
||||||
|
<div class="cameraList">
|
||||||
|
<div v-for="s in 30" class="camera-item">
|
||||||
|
|
||||||
|
<span><span class="icon"></span>隧道{{ s }}号位摄像头</span>
|
||||||
|
<span class="btn">查看</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Manage',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.onlineCamera {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 6%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 7%;
|
||||||
|
margin-bottom: 4%;
|
||||||
|
}
|
||||||
|
.cameraList::-webkit-scrollbar{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.cameraList{
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: transparent;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.camera-item{
|
||||||
|
height: 5%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
font-size: 14px;
|
||||||
|
.icon{
|
||||||
|
display: inline-block;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
background-image: url('@/assets/images/camera-icon.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.btn{
|
||||||
|
color: #4351fd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&>.camera-item:nth-child(2n-1){
|
||||||
|
background-color: rgba(255, 255,255, .8);
|
||||||
|
border-radius: 8px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:'OutStore',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
|
||||||
|
},
|
||||||
|
computed:{
|
||||||
|
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,691 @@
|
||||||
|
<template>
|
||||||
|
<div class="overview">
|
||||||
|
|
||||||
|
<!-- 仓库使用率 -->
|
||||||
|
<div class="storeUse" ref="storeUse">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!-- 每月周转率 -->
|
||||||
|
<div class="monthlyTurnover">
|
||||||
|
<div class="title">
|
||||||
|
每日周转率
|
||||||
|
</div>
|
||||||
|
<div class="turnoverChart" ref="turnoverChart">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 当月出库金额 -->
|
||||||
|
<div class="outboundAmount">
|
||||||
|
<div class="title">
|
||||||
|
当月出库金额
|
||||||
|
</div>
|
||||||
|
<div class="outboundChart" ref="outboundChart">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 积压物资 -->
|
||||||
|
<div class="overStock" ref="overStock">
|
||||||
|
<div class="title">
|
||||||
|
积压物资
|
||||||
|
</div>
|
||||||
|
<div class="overChart" ref="oveChart">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
storemyChart: '',//仓库使用率echarts
|
||||||
|
myChart2: '',//每月周转率echarts
|
||||||
|
myChart3: '',//当月出库金额echarts
|
||||||
|
myChart4: '',//积压物资
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.drawStore()
|
||||||
|
this.drawTurnoverChart()
|
||||||
|
this.drawOutbound()
|
||||||
|
this.drawOverStock()
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 仓库使用率的ecahrt图
|
||||||
|
drawStore() {
|
||||||
|
this.storemyChart = this.$echarts.init(this.$refs.storeUse)
|
||||||
|
const chartData = [
|
||||||
|
{
|
||||||
|
value: 24,
|
||||||
|
name: "使用率",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 76,
|
||||||
|
name: "空闲率",
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
|
const colorList = ['#f49a58', '#4351fd'];
|
||||||
|
const pieData1 = [];
|
||||||
|
// const pieData2 = [];
|
||||||
|
// 图型条间距
|
||||||
|
const gapData = {
|
||||||
|
name: "",
|
||||||
|
value: 5,
|
||||||
|
itemStyle: {
|
||||||
|
color: "transparent",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
let lefts = ["20%", "20%", "center", "center", "center", "center"];
|
||||||
|
let tops = ["48%", "60%", "55%", "24%", "37%", "55%"];
|
||||||
|
// 第二个图例设置位置
|
||||||
|
let tops1 = ['45%', '62%']
|
||||||
|
let legendData = [];
|
||||||
|
let total = 0;
|
||||||
|
chartData.forEach((item) => {
|
||||||
|
total += item.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
for (let i = 0; i < chartData.length; i++) {
|
||||||
|
// 第一圈数据
|
||||||
|
pieData1.push({
|
||||||
|
...chartData[i],
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
pieData1.push(gapData);
|
||||||
|
legendData.push({
|
||||||
|
show: true,
|
||||||
|
icon: "circle",
|
||||||
|
itemHeight: 6,
|
||||||
|
itemWidth: 4, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
||||||
|
left: lefts[i],
|
||||||
|
top: tops[i],
|
||||||
|
itemStyle: {
|
||||||
|
color: colorList[i],
|
||||||
|
},
|
||||||
|
formatter:
|
||||||
|
`{aa| ` + chartData[i].name + ` } `, // 也可以是个函数return
|
||||||
|
x: "left",
|
||||||
|
textStyle: {
|
||||||
|
// color: "#BAFF7F",
|
||||||
|
rich: {
|
||||||
|
aa: {
|
||||||
|
color: "#000",
|
||||||
|
fontSize: 14,
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [chartData[i].name],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
show: true,
|
||||||
|
icon: "circle",
|
||||||
|
itemWidth: 4,
|
||||||
|
itemHeight: 6, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
||||||
|
left: '65%',
|
||||||
|
top: tops1[i],
|
||||||
|
// width:'1000',
|
||||||
|
backgroundColor: colorList[i],
|
||||||
|
borderRadius: 10,
|
||||||
|
itemStyle: {
|
||||||
|
color: colorList[i],
|
||||||
|
},
|
||||||
|
|
||||||
|
formatter:
|
||||||
|
`{aa| ` + chartData[i].name + ` }{val| ` + parseInt(chartData[i].value / total * 100) + `% }`, // 也可以是个函数return
|
||||||
|
x: "left",
|
||||||
|
textStyle: {
|
||||||
|
// color: "#BAFF7F",
|
||||||
|
rich: {
|
||||||
|
aa: {
|
||||||
|
|
||||||
|
color: "#ffffff",
|
||||||
|
},
|
||||||
|
val: {
|
||||||
|
color: "#fff",
|
||||||
|
fontWeight: 'bold'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [chartData[i].name],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// console.log("pieData2---------", pieData2);
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
|
||||||
|
title: {
|
||||||
|
text: "仓库使用率",
|
||||||
|
x: '5%',
|
||||||
|
y: '10%',
|
||||||
|
textStyle: {
|
||||||
|
color: '#000',
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: 'normal'
|
||||||
|
},
|
||||||
|
// formatter(params){
|
||||||
|
// console.log(params,'.....');
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
legend: legendData,
|
||||||
|
// backgroundColor: "#0F141B",
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
backgroundColor: "rgba(0, 0, 0,.8)",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
color: colorList,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '',
|
||||||
|
type: 'pie',
|
||||||
|
roundCap: true,
|
||||||
|
radius: ['52%', '60%'],
|
||||||
|
center: ['30%', '60%'],
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: pieData1
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'gauge',
|
||||||
|
zlevel: 2,
|
||||||
|
splitNumber: 90,
|
||||||
|
radius: '67%',
|
||||||
|
center: ['30%', '60%'],
|
||||||
|
startAngle: 90,
|
||||||
|
endAngle: -269.9999,
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
length: 1,
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: 'rgb(33,85,130)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
show: 0,
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
show: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
this.storemyChart.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.storemyChart.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 每日周转率
|
||||||
|
drawTurnoverChart() {
|
||||||
|
this.myChart2 = this.$echarts.init(this.$refs.turnoverChart)
|
||||||
|
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月']
|
||||||
|
var yDataArr = [0, 182, 191, 150, 0, 0, 0]
|
||||||
|
var colors = ['#4587E7', '#55c3f6', '#4351fd', '#f49a58', '#da70d6', '#32cd32'];
|
||||||
|
let option = {
|
||||||
|
|
||||||
|
xAxis: {
|
||||||
|
boundaryGap: true,
|
||||||
|
type: 'category',
|
||||||
|
data: xDataArr,
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置。
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#57b7e8",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置。
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#ebecec",
|
||||||
|
type: "dashed",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: { // 让图表占满容器
|
||||||
|
top: "20%",
|
||||||
|
left: "15%",
|
||||||
|
right: "7%",
|
||||||
|
bottom: "15%"
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
itemStyle: {
|
||||||
|
color: function (params) {
|
||||||
|
for (let i = 0; i < xDataArr.length; i++) {
|
||||||
|
if (xDataArr[i].indexOf(params.name) != -1) {
|
||||||
|
return colors[i]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
name: '星期',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 20,
|
||||||
|
data: yDataArr
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.myChart2.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myChart2.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 当月出库金额
|
||||||
|
drawOutbound() {
|
||||||
|
this.myChart3 = this.$echarts.init(this.$refs.outboundChart)
|
||||||
|
let option = {
|
||||||
|
|
||||||
|
legend: {
|
||||||
|
data: ['入库', '出库'],
|
||||||
|
textStyle: {
|
||||||
|
align: 'right',
|
||||||
|
},
|
||||||
|
top: '2%',
|
||||||
|
right: '2%',
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
},
|
||||||
|
|
||||||
|
grid: { // 让图表占满容器
|
||||||
|
top: "20%",
|
||||||
|
left: "15%",
|
||||||
|
right: "7%",
|
||||||
|
bottom: "15%"
|
||||||
|
},
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#57b7e8",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置。
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
// show: true,
|
||||||
|
color: '#f00',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#f00',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
boundaryGap: true,
|
||||||
|
data: [0, 5, 10, 15, 20, 25, 30],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
name: '单位:万元',
|
||||||
|
min: 0,
|
||||||
|
// max: 140,
|
||||||
|
splitNumber: 4,
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#ebecec",
|
||||||
|
type: "dashed",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
//坐标轴刻度标签的相关设置。
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "rgb(0,0,0)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '入库',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true, //是否平滑
|
||||||
|
// showAllSymbol: true,
|
||||||
|
symbol: 'none',
|
||||||
|
// symbolSize: 12,
|
||||||
|
lineStyle: {
|
||||||
|
|
||||||
|
color: '#f4aa74',
|
||||||
|
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#f4aa74',
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 3,
|
||||||
|
},
|
||||||
|
data: [42.8, 14.7, 13.2, 32.1, 10.4],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '出库',
|
||||||
|
type: 'line',
|
||||||
|
smooth: true, //是否平滑
|
||||||
|
symbol: 'none',
|
||||||
|
symbolSize: 12,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#4351fd',
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: '#4351fd',
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 3,
|
||||||
|
},
|
||||||
|
data: [0, 0, 38.6, 26.4, 34.4],
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
};
|
||||||
|
this.myChart3.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myChart3.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 积压物质
|
||||||
|
drawOverStock() {
|
||||||
|
this.myChart4 = this.$echarts.init(this.$refs.oveChart)
|
||||||
|
var data = [
|
||||||
|
{
|
||||||
|
name: "积压物资",
|
||||||
|
value: 10,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "非积压物质",
|
||||||
|
value: 123.11,
|
||||||
|
},
|
||||||
|
|
||||||
|
];
|
||||||
|
var total = data.reduce((pre, cur) => {
|
||||||
|
console.log(pre, cur.value, '数据');
|
||||||
|
return pre.value + cur.value
|
||||||
|
})
|
||||||
|
var titleArr = [],
|
||||||
|
seriesArr = [];
|
||||||
|
var colors = [
|
||||||
|
["#f49a58", "#e9eaeb"],
|
||||||
|
["#4351fd", "#e9eaeb"],
|
||||||
|
["#ffc257", "#ffedcc"],
|
||||||
|
["#fd6f97", "#fed4e0"],
|
||||||
|
["#a181fc", "#e3d9fe"],
|
||||||
|
];
|
||||||
|
var legendData = []
|
||||||
|
data.forEach(function (item, index) {
|
||||||
|
legendData.push({
|
||||||
|
data: [index == 0 ? item.name : ""],
|
||||||
|
show: true,
|
||||||
|
icon: "circle",
|
||||||
|
// backgroundColor:'#000',
|
||||||
|
// itemHeight: 50,
|
||||||
|
// textAlign:'center',
|
||||||
|
// orient:'vertical',
|
||||||
|
// itemWidth: 50, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
||||||
|
left: "13%",
|
||||||
|
bottom: '5%',
|
||||||
|
itemStyle: {
|
||||||
|
color: colors[index],
|
||||||
|
},
|
||||||
|
formatter:
|
||||||
|
`{aa|20000万}\n{bb|总物资}`, // 也可以是个函数return
|
||||||
|
x: "left",
|
||||||
|
textStyle: {
|
||||||
|
// color: "#BAFF7F",
|
||||||
|
rich: {
|
||||||
|
aa: {
|
||||||
|
color: colors[index][0],
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: '900',
|
||||||
|
// textAlign:'center'
|
||||||
|
padding: [0, 0, 8, 0]
|
||||||
|
},
|
||||||
|
bb: {
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
data: [index == 1 ? item.name : ""],
|
||||||
|
show: true,
|
||||||
|
icon: "circle",
|
||||||
|
itemHeight: 0,
|
||||||
|
itemWidth: 0, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
||||||
|
left: "55%",
|
||||||
|
bottom: '5%',
|
||||||
|
itemStyle: {
|
||||||
|
color: colors[index],
|
||||||
|
},
|
||||||
|
formatter:
|
||||||
|
`{aa|${(item.value / 100 * 100).toFixed(2)}% }\n{bb| ${item.name}占比}`, // 也可以是个函数return
|
||||||
|
x: "left",
|
||||||
|
textStyle: {
|
||||||
|
// color: "#BAFF7F",
|
||||||
|
rich: {
|
||||||
|
aa: {
|
||||||
|
color: colors[index][0],
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: '800',
|
||||||
|
// itemWidth:50,
|
||||||
|
padding: [0, 0, 8, 8]
|
||||||
|
},
|
||||||
|
bb: {
|
||||||
|
color: '#000'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
titleArr.push({
|
||||||
|
text: item.name,
|
||||||
|
left: index * 40 + 28 + "%",
|
||||||
|
top: "60%",
|
||||||
|
textAlign: "center",
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: "normal",
|
||||||
|
fontSize: "14",
|
||||||
|
color: '#000',
|
||||||
|
textAlign: "center",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
seriesArr.push({
|
||||||
|
name: item.name,
|
||||||
|
type: "pie",
|
||||||
|
clockWise: false,
|
||||||
|
radius: ['46%', '54%'],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colors[index][0],
|
||||||
|
shadowColor: colors[index][0],
|
||||||
|
borderRadius: 10,
|
||||||
|
shadowBlur: 0,
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hoverAnimation: false,
|
||||||
|
center: [index * 40 + 30 + "%", "30%"],
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: item.value,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
formatter: function (params) {
|
||||||
|
return params.value + '万';
|
||||||
|
},
|
||||||
|
position: "center",
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: "14",
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: colors[index][0],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: total - item.value,
|
||||||
|
name: "invisible",
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: colors[index][1],
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: colors[index][1],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}, {
|
||||||
|
|
||||||
|
type: 'pie',
|
||||||
|
zlevel: -1, // 层级
|
||||||
|
radius: ['38%', '0'],
|
||||||
|
center: [index * 40 + 30 + "%", "30%"],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#fff',
|
||||||
|
label: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hoverAnimation: false,
|
||||||
|
data: [100]
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
title: titleArr,
|
||||||
|
legend: legendData,
|
||||||
|
series: seriesArr,
|
||||||
|
};
|
||||||
|
this.myChart4.setOption(option)
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
this.myChart4.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang='less'>
|
||||||
|
.overview {
|
||||||
|
width: 81.2%;
|
||||||
|
// display: none;
|
||||||
|
// opacity: 0;
|
||||||
|
// transition: transform .5s linear;
|
||||||
|
height: 100%;
|
||||||
|
// transform: translateX(-100%);
|
||||||
|
background-color: rgba(229, 237, 242, .5);
|
||||||
|
border-top-right-radius: 20px;
|
||||||
|
border-bottom-right-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-left: 7%;
|
||||||
|
margin-bottom: 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.storeUse {
|
||||||
|
width: 100%;
|
||||||
|
height: 21.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monthlyTurnover,
|
||||||
|
.outboundAmount {
|
||||||
|
width: 100%;
|
||||||
|
height: 25%;
|
||||||
|
|
||||||
|
.turnoverChart,
|
||||||
|
.outboundChart {
|
||||||
|
width: 90%;
|
||||||
|
height: 80%;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.overStock {
|
||||||
|
height: calc(100% - 71.5%);
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.overChart {
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -64,7 +64,8 @@ export default {
|
||||||
ISRList: [
|
ISRList: [
|
||||||
{ productMsg: '镇江扬中国电电力线缆', address: 'B01-050103', num: '26823' },
|
{ productMsg: '镇江扬中国电电力线缆', address: 'B01-050103', num: '26823' },
|
||||||
{ productMsg: '镇江扬中国电电力线缆', address: 'B01-050104', num: '17895' },
|
{ productMsg: '镇江扬中国电电力线缆', address: 'B01-050104', num: '17895' },
|
||||||
]
|
],
|
||||||
|
textarea:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -246,7 +247,7 @@ export default {
|
||||||
|
|
||||||
/deep/ .el-textarea__inner {
|
/deep/ .el-textarea__inner {
|
||||||
background-color: rgba(255, 255, 255, .8);
|
background-color: rgba(255, 255, 255, .8);
|
||||||
color: #e3e3e3;
|
color: #000;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,61 +7,59 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- 右边小图标样式 -->
|
<!-- 右边小图标样式 -->
|
||||||
<ul class="icons">
|
<ul class="icons">
|
||||||
<li class="icon-item" v-for="(s, i) in asideList" :key="i" @click="updateImg(i)">
|
<li class="icon-item" ref="iconItem" v-for="(s, i) in asideList" data-num="0" :key="i"
|
||||||
|
@click="updateImg(i, $event)">
|
||||||
<img :src="i == index ? s.select : s.pic" alt="">
|
<img :src="i == index ? s.select : s.pic" alt="">
|
||||||
<span :style="i == index ? 'color:#2620b1' : ''">{{ s.name }}</span>
|
<span :style="i == index ? 'color:#2620b1' : ''">{{ s.name }}</span>
|
||||||
|
<div class="mark">
|
||||||
|
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<!-- <transition name="slide-fade"> -->
|
<!-- <transition name="slide-fade"> -->
|
||||||
<div class="right-item" v-if="index == 0">
|
|
||||||
<!-- 仓库使用率 -->
|
|
||||||
<div class="storeUse" ref="storeUse">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<!-- 每月周转率 -->
|
|
||||||
<div class="monthlyTurnover">
|
|
||||||
<div class="title">
|
|
||||||
每日周转率
|
|
||||||
</div>
|
|
||||||
<div class="turnoverChart" ref="turnoverChart">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 当月出库金额 -->
|
|
||||||
<div class="outboundAmount">
|
|
||||||
<div class="title">
|
|
||||||
当月出库金额
|
|
||||||
</div>
|
|
||||||
<div class="outboundChart" ref="outboundChart">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- 积压物资 -->
|
|
||||||
<div class="overStock" ref="overStock">
|
|
||||||
<div class="title">
|
|
||||||
积压物资
|
|
||||||
</div>
|
|
||||||
<div class="overChart" ref="oveChart">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- </transition> -->
|
<!-- </transition> -->
|
||||||
<!-- <transition name="move"> -->
|
<!-- <transition name="move"> -->
|
||||||
<Stock v-if="index == 1" class="right-item" />
|
<!-- 库存组件 -->
|
||||||
|
<!-- <Stock v-if="index == 1" class="right-item" /> -->
|
||||||
|
<!-- 入库的组件 -->
|
||||||
|
<!-- <EnterStore v-if="index == 2" class="right-item" /> -->
|
||||||
|
<!-- 出库组件 -->
|
||||||
|
<!-- <OutStore v-if="index == 3" class="right-item" /> -->
|
||||||
|
<!-- <Manage v-if="index == 4" class="right-item" /> -->
|
||||||
<!-- </transition> -->
|
<!-- </transition> -->
|
||||||
|
<keep-alive>
|
||||||
|
<transition name="slide-fade" mode="out-in">
|
||||||
|
<component ref="rightItem" :is="view" class="right-item"></component>
|
||||||
|
</transition>
|
||||||
|
</keep-alive>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
// 库存组件
|
||||||
import Stock from '@/component/Stock.vue'
|
import Stock from '@/component/Stock.vue'
|
||||||
|
// 管理组件
|
||||||
|
import Manage from '@/component/Manage.vue'
|
||||||
|
// 入库组件
|
||||||
|
import EnterStore from '@/component/EnterStore.vue'
|
||||||
|
// 出库组件
|
||||||
|
import OutStore from '@/component/OutStore.vue'
|
||||||
|
import OverView from '@/component/OverView.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'index',
|
name: 'index',
|
||||||
components: {
|
components: {
|
||||||
Stock,
|
Stock,
|
||||||
|
Manage,
|
||||||
|
EnterStore,
|
||||||
|
OutStore,
|
||||||
|
OverView
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -73,620 +71,89 @@ export default {
|
||||||
{ name: '出库', select: require("@/assets/images/out-select.png"), pic: require('@/assets/images/out-default.png') },
|
{ name: '出库', select: require("@/assets/images/out-select.png"), pic: require('@/assets/images/out-default.png') },
|
||||||
{ name: '管理', select: require("@/assets/images/manage-select.png"), pic: require('@/assets/images/manage-default.png') }
|
{ name: '管理', select: require("@/assets/images/manage-select.png"), pic: require('@/assets/images/manage-default.png') }
|
||||||
],
|
],
|
||||||
storemyChart: '',//仓库使用率echarts
|
view: '',
|
||||||
myChart2: '',//每月周转率echarts
|
asideShow: false,
|
||||||
myChart3: '',//当月出库金额echarts
|
|
||||||
myChart4: '',//积压物资
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 总览界面echarts
|
// setTimeout(()=>{
|
||||||
this.drawStore()
|
this.view = 'OverView'
|
||||||
this.drawTurnoverChart()
|
// },2000)
|
||||||
this.drawOutbound()
|
|
||||||
this.drawOverStock()
|
|
||||||
},
|
},
|
||||||
watch: {
|
created(){
|
||||||
index: {
|
|
||||||
handler(newVal) {
|
|
||||||
if (newVal) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
|
|
||||||
// console.log(1);
|
|
||||||
// console.log(this.myChart2.resize());
|
|
||||||
this.storemyChart.resize()
|
|
||||||
// this.myChart2.resize
|
|
||||||
// this.myChart3.resize
|
|
||||||
// this.myChart4.resize
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 切图
|
// 切图
|
||||||
updateImg(i) {
|
updateImg(i, event) {
|
||||||
|
// 当页面显示出来时 再次点击隐藏
|
||||||
|
this.asideShow = !this.asideShow
|
||||||
|
if (this.index == i && this.asideShow) {
|
||||||
|
// console.log(1);
|
||||||
|
this.view = ''
|
||||||
|
return
|
||||||
|
}
|
||||||
this.index = i
|
this.index = i
|
||||||
|
// let rightBox = document.querySelector('.right-item')
|
||||||
|
// rightBox.style.transform = 'translateX(0)'
|
||||||
|
// console.log(rightBox,'dom元素');
|
||||||
|
// console.log(event.target,'....');
|
||||||
|
|
||||||
if (this.index == 0) {
|
if (this.index == 0) {
|
||||||
this.$nextTick(() => {
|
// this.$nextTick(() => {
|
||||||
// 总览界面echarts
|
// // 总览界面echarts
|
||||||
this.drawStore()
|
// this.drawStore()
|
||||||
this.drawTurnoverChart()
|
// this.drawTurnoverChart()
|
||||||
this.drawOutbound()
|
// this.drawOutbound()
|
||||||
this.drawOverStock()
|
// this.drawOverStock()
|
||||||
})
|
// })
|
||||||
|
this.view = 'OverView'
|
||||||
|
} else if (this.index == 1) {
|
||||||
|
this.view = 'Stock'
|
||||||
|
} else if (this.index == 2) {
|
||||||
|
this.view = 'EnterStore'
|
||||||
|
} else if (this.index == 3) {
|
||||||
|
|
||||||
|
this.view = 'OutStore'
|
||||||
|
} else if (this.index == 4) {
|
||||||
|
this.view = 'Manage'
|
||||||
}
|
}
|
||||||
|
this.asideShow = false
|
||||||
},
|
|
||||||
// 仓库使用率的ecahrt图
|
|
||||||
drawStore() {
|
|
||||||
this.storemyChart = this.$echarts.init(this.$refs.storeUse)
|
|
||||||
const chartData = [
|
|
||||||
{
|
|
||||||
value: 24,
|
|
||||||
name: "使用率",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 76,
|
|
||||||
name: "空闲率",
|
|
||||||
},
|
|
||||||
|
|
||||||
];
|
|
||||||
const colorList = ['#88D9FF', '#0092FF', '#81EDD2', '#B0FA93', '#63F2FF', '#9999FE'];
|
|
||||||
const pieData1 = [];
|
|
||||||
// const pieData2 = [];
|
|
||||||
// 图型条间距
|
|
||||||
const gapData = {
|
|
||||||
name: "",
|
|
||||||
value: 5,
|
|
||||||
itemStyle: {
|
|
||||||
color: "transparent",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
let lefts = ["20%", "20%", "center", "center", "center", "center"];
|
|
||||||
let tops = ["48%", "60%", "55%", "24%", "37%", "55%"];
|
|
||||||
let legendData = [];
|
|
||||||
let total = 0;
|
|
||||||
chartData.forEach((item) => {
|
|
||||||
total += item.value;
|
|
||||||
});
|
|
||||||
|
|
||||||
for (let i = 0; i < chartData.length; i++) {
|
|
||||||
// 第一圈数据
|
|
||||||
pieData1.push({
|
|
||||||
...chartData[i],
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 10,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
pieData1.push(gapData);
|
|
||||||
legendData.push({
|
|
||||||
show: true,
|
|
||||||
icon: "circle",
|
|
||||||
itemHeight: 6,
|
|
||||||
itemWidth: 4, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
|
||||||
left: lefts[i],
|
|
||||||
top: tops[i],
|
|
||||||
itemStyle: {
|
|
||||||
color: colorList[i],
|
|
||||||
},
|
|
||||||
formatter:
|
|
||||||
`{aa| ` + chartData[i].name + ` } `, // 也可以是个函数return
|
|
||||||
x: "left",
|
|
||||||
textStyle: {
|
|
||||||
// color: "#BAFF7F",
|
|
||||||
rich: {
|
|
||||||
aa: {
|
|
||||||
color: "#000",
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: [chartData[i].name],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
show: true,
|
|
||||||
icon: "circle",
|
|
||||||
itemWidth: 4,
|
|
||||||
itemHeight: 6, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
|
||||||
left: '65%',
|
|
||||||
top: tops[i],
|
|
||||||
itemStyle: {
|
|
||||||
color: colorList[i],
|
|
||||||
},
|
|
||||||
formatter:
|
|
||||||
`{aa| ` + chartData[i].name + ` }{val| ` + parseInt(chartData[i].value / total * 100) + `% }`, // 也可以是个函数return
|
|
||||||
x: "left",
|
|
||||||
textStyle: {
|
|
||||||
// color: "#BAFF7F",
|
|
||||||
rich: {
|
|
||||||
aa: {
|
|
||||||
|
|
||||||
color: "#ffffff",
|
|
||||||
},
|
|
||||||
val: {
|
|
||||||
color: "#fff",
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: [chartData[i].name],
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// console.log("pieData2---------", pieData2);
|
|
||||||
|
|
||||||
let option = {
|
|
||||||
|
|
||||||
title: {
|
|
||||||
text: "仓库使用率",
|
|
||||||
x: '5%',
|
|
||||||
y: '10%',
|
|
||||||
textStyle: {
|
|
||||||
color: '#000',
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: 'normal'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: legendData,
|
|
||||||
// backgroundColor: "#0F141B",
|
|
||||||
tooltip: {
|
|
||||||
show: true,
|
|
||||||
backgroundColor: "rgba(0, 0, 0,.8)",
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
color: colorList,
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '',
|
|
||||||
type: 'pie',
|
|
||||||
roundCap: true,
|
|
||||||
radius: ['52%', '60%'],
|
|
||||||
center: ['30%', '60%'],
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
data: pieData1
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
type: 'gauge',
|
|
||||||
zlevel: 2,
|
|
||||||
splitNumber: 90,
|
|
||||||
radius: '67%',
|
|
||||||
center: ['30%', '60%'],
|
|
||||||
startAngle: 90,
|
|
||||||
endAngle: -269.9999,
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
length: 1,
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
color: 'rgb(33,85,130)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
pointer: {
|
|
||||||
show: 0,
|
|
||||||
},
|
|
||||||
detail: {
|
|
||||||
show: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
this.storemyChart.setOption(option)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.storemyChart.resize();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 每日周转率
|
|
||||||
drawTurnoverChart() {
|
|
||||||
this.myChart2 = this.$echarts.init(this.$refs.turnoverChart)
|
|
||||||
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月']
|
|
||||||
var yDataArr = [0, 182, 191, 150, 0, 0, 0]
|
|
||||||
var colors = ['#4587E7', '#55c3f6', '#4351fd', '#f49a58', '#da70d6', '#32cd32'];
|
|
||||||
let option = {
|
|
||||||
|
|
||||||
xAxis: {
|
|
||||||
boundaryGap: true,
|
|
||||||
type: 'category',
|
|
||||||
data: xDataArr,
|
|
||||||
axisLabel: {
|
|
||||||
//坐标轴刻度标签的相关设置。
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: "rgb(0,0,0)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#57b7e8",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
axisLabel: {
|
|
||||||
//坐标轴刻度标签的相关设置。
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: "rgb(0,0,0)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
type: 'value',
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ebecec",
|
|
||||||
type: "dashed",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: { // 让图表占满容器
|
|
||||||
top: "20%",
|
|
||||||
left: "15%",
|
|
||||||
right: "7%",
|
|
||||||
bottom: "15%"
|
|
||||||
},
|
|
||||||
series: [{
|
|
||||||
itemStyle: {
|
|
||||||
color: function (params) {
|
|
||||||
for (let i = 0; i < xDataArr.length; i++) {
|
|
||||||
if (xDataArr[i].indexOf(params.name) != -1) {
|
|
||||||
return colors[i]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
name: '星期',
|
|
||||||
type: 'bar',
|
|
||||||
barWidth: 20,
|
|
||||||
data: yDataArr
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
|
|
||||||
this.myChart2.setOption(option)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.myChart2.resize();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 当月出库金额
|
|
||||||
drawOutbound() {
|
|
||||||
this.myChart3 = this.$echarts.init(this.$refs.outboundChart)
|
|
||||||
let option = {
|
|
||||||
|
|
||||||
legend: {
|
|
||||||
data: ['入库', '出库'],
|
|
||||||
textStyle: {
|
|
||||||
align: 'right',
|
|
||||||
},
|
|
||||||
top: '2%',
|
|
||||||
right: '2%',
|
|
||||||
},
|
|
||||||
|
|
||||||
tooltip: {
|
|
||||||
trigger: 'axis',
|
|
||||||
},
|
|
||||||
|
|
||||||
grid: { // 让图表占满容器
|
|
||||||
top: "20%",
|
|
||||||
left: "15%",
|
|
||||||
right: "7%",
|
|
||||||
bottom: "15%"
|
|
||||||
},
|
|
||||||
xAxis: [
|
|
||||||
{
|
|
||||||
type: 'category',
|
|
||||||
axisLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#57b7e8",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
//坐标轴刻度标签的相关设置。
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: "rgb(0,0,0)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
splitArea: {
|
|
||||||
// show: true,
|
|
||||||
color: '#f00',
|
|
||||||
lineStyle: {
|
|
||||||
color: '#f00',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
boundaryGap: true,
|
|
||||||
data: [0, 5, 10, 15, 20, 25, 30],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
name: '单位:万元',
|
|
||||||
min: 0,
|
|
||||||
// max: 140,
|
|
||||||
splitNumber: 4,
|
|
||||||
splitLine: {
|
|
||||||
lineStyle: {
|
|
||||||
color: "#ebecec",
|
|
||||||
type: "dashed",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
//坐标轴刻度标签的相关设置。
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: "rgb(0,0,0)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '入库',
|
|
||||||
type: 'line',
|
|
||||||
smooth: true, //是否平滑
|
|
||||||
// showAllSymbol: true,
|
|
||||||
symbol: 'none',
|
|
||||||
// symbolSize: 12,
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#7AA1FF',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// itemStyle: {
|
|
||||||
// color: '#7AA1FF',
|
|
||||||
// borderWidth: 3,
|
|
||||||
// borderColor: '#f3f3f3',
|
|
||||||
// },
|
|
||||||
data: [42.8, 14.7, 13.2, 32.1, 10.4],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '出库',
|
|
||||||
type: 'line',
|
|
||||||
smooth: true, //是否平滑
|
|
||||||
symbol: 'none',
|
|
||||||
symbolSize: 12,
|
|
||||||
lineStyle: {
|
|
||||||
normal: {
|
|
||||||
color: '#00ca95',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
color: '#00ca95',
|
|
||||||
borderColor: '#fff',
|
|
||||||
borderWidth: 3,
|
|
||||||
},
|
|
||||||
data: [0, 0, 38.6, 26.4, 34.4],
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
};
|
|
||||||
this.myChart3.setOption(option)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.myChart3.resize();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 积压物质
|
|
||||||
drawOverStock() {
|
|
||||||
this.myChart4 = this.$echarts.init(this.$refs.oveChart)
|
|
||||||
var data = [
|
|
||||||
{
|
|
||||||
name: "积压物资",
|
|
||||||
value: 54,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "非积压物质",
|
|
||||||
value: 44,
|
|
||||||
},
|
|
||||||
|
|
||||||
];
|
|
||||||
|
|
||||||
var titleArr = [],
|
|
||||||
seriesArr = [];
|
|
||||||
var colors = [
|
|
||||||
["#389af4", "#dfeaff"],
|
|
||||||
["#ff8c37", "#ffdcc3"],
|
|
||||||
["#ffc257", "#ffedcc"],
|
|
||||||
["#fd6f97", "#fed4e0"],
|
|
||||||
["#a181fc", "#e3d9fe"],
|
|
||||||
];
|
|
||||||
var legendData = []
|
|
||||||
data.forEach(function (item, index) {
|
|
||||||
legendData.push({
|
|
||||||
data: [index == 0 ? item.name : ""],
|
|
||||||
show: true,
|
|
||||||
icon: "circle",
|
|
||||||
itemHeight: 0,
|
|
||||||
itemWidth: 0, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
|
||||||
left: "18%",
|
|
||||||
bottom: '10%',
|
|
||||||
itemStyle: {
|
|
||||||
color: colors[index],
|
|
||||||
},
|
|
||||||
formatter:
|
|
||||||
`{aa|20000万 }\n {bb| 总物资 }`, // 也可以是个函数return
|
|
||||||
x: "left",
|
|
||||||
textStyle: {
|
|
||||||
// color: "#BAFF7F",
|
|
||||||
rich: {
|
|
||||||
aa: {
|
|
||||||
color: colors[index][0],
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: 'blod',
|
|
||||||
padding: [0, 0, 8, 0],
|
|
||||||
},
|
|
||||||
bb: {
|
|
||||||
color: '#000'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}, {
|
|
||||||
data: [index == 1 ? item.name : ""],
|
|
||||||
show: true,
|
|
||||||
icon: "circle",
|
|
||||||
itemHeight: 0,
|
|
||||||
itemWidth: 0, //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
|
|
||||||
left: "55%",
|
|
||||||
bottom: '10%',
|
|
||||||
itemStyle: {
|
|
||||||
color: colors[index],
|
|
||||||
},
|
|
||||||
formatter:
|
|
||||||
`{aa|${(item.value / 100 * 100).toFixed(2)}% }\n {bb| ${item.name}占比 }`, // 也可以是个函数return
|
|
||||||
x: "left",
|
|
||||||
textStyle: {
|
|
||||||
// color: "#BAFF7F",
|
|
||||||
rich: {
|
|
||||||
aa: {
|
|
||||||
color: colors[index][0],
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: 'blod',
|
|
||||||
padding: [0, 0, 8, 20]
|
|
||||||
},
|
|
||||||
bb: {
|
|
||||||
color: '#000'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
}
|
|
||||||
})
|
|
||||||
titleArr.push({
|
|
||||||
text: item.name,
|
|
||||||
left: index * 40 + 30 + "%",
|
|
||||||
top: "55%",
|
|
||||||
textAlign: "center",
|
|
||||||
textStyle: {
|
|
||||||
fontWeight: "normal",
|
|
||||||
fontSize: "14",
|
|
||||||
color: '#000',
|
|
||||||
textAlign: "center",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
seriesArr.push({
|
|
||||||
name: item.name,
|
|
||||||
type: "pie",
|
|
||||||
clockWise: false,
|
|
||||||
radius: ['40%', '46%'],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: colors[index][0],
|
|
||||||
shadowColor: colors[index][0],
|
|
||||||
borderRadius: 10,
|
|
||||||
shadowBlur: 0,
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
hoverAnimation: false,
|
|
||||||
center: [index * 40 + 30 + "%", "30%"],
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: item.value,
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
formatter: function (params) {
|
|
||||||
return params.value + '万';
|
|
||||||
},
|
|
||||||
position: "center",
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
fontSize: "14",
|
|
||||||
fontWeight: "bold",
|
|
||||||
color: colors[index][0],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 100 - item.value,
|
|
||||||
name: "invisible",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: colors[index][1],
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
color: colors[index][1],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}, {
|
|
||||||
|
|
||||||
type: 'pie',
|
|
||||||
zlevel: -1, // 层级
|
|
||||||
radius: ['32%', '0'],
|
|
||||||
center: [index * 40 + 30 + "%", "30%"],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
shadowBlur: 10,
|
|
||||||
shadowColor: 'rgba(0,161,163,0.25)',
|
|
||||||
color: '#fff',
|
|
||||||
label: {
|
|
||||||
show: false
|
|
||||||
},
|
|
||||||
labelLine: {
|
|
||||||
show: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
hoverAnimation: false,
|
|
||||||
data: [100]
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
let option = {
|
|
||||||
title: titleArr,
|
|
||||||
legend: legendData,
|
|
||||||
series: seriesArr,
|
|
||||||
};
|
|
||||||
this.myChart4.setOption(option)
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
this.myChart4.resize();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
|
.mark {
|
||||||
|
// display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
// background-color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-fade-enter-active {
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-fade-leave-active {
|
||||||
|
transition: all 1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-fade-enter,
|
||||||
|
.slide-fade-leave-to {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.aside {
|
.aside {
|
||||||
width: 21.4%;
|
width: 21.4%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -699,6 +166,7 @@ export default {
|
||||||
.aside-box {
|
.aside-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 92.6%;
|
height: 92.6%;
|
||||||
|
overflow: hidden;
|
||||||
// background-color: rgba(229, 237, 242, .5);
|
// background-color: rgba(229, 237, 242, .5);
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -709,6 +177,8 @@ export default {
|
||||||
background-color: #f7f8f9;
|
background-color: #f7f8f9;
|
||||||
border-top-left-radius: 20px;
|
border-top-left-radius: 20px;
|
||||||
border-bottom-left-radius: 20px;
|
border-bottom-left-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 15;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
|
@ -729,6 +199,8 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -746,10 +218,16 @@ export default {
|
||||||
|
|
||||||
.right-item {
|
.right-item {
|
||||||
width: 81.2%;
|
width: 81.2%;
|
||||||
|
// display: none;
|
||||||
|
// opacity: 0;
|
||||||
|
// transition: all 1s;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
// transform: translateX(-100%);
|
||||||
background-color: rgba(229, 237, 242, .5);
|
background-color: rgba(229, 237, 242, .5);
|
||||||
border-top-right-radius: 20px;
|
border-top-right-radius: 20px;
|
||||||
border-bottom-right-radius: 20px;
|
border-bottom-right-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
|
||||||
|
|
@ -2,3 +2,32 @@ const { defineConfig } = require('@vue/cli-service')
|
||||||
module.exports = defineConfig({
|
module.exports = defineConfig({
|
||||||
transpileDependencies: true
|
transpileDependencies: true
|
||||||
})
|
})
|
||||||
|
module.exports = {
|
||||||
|
// 打包文件配置
|
||||||
|
publicPath: "/",
|
||||||
|
assetsDir: "static",
|
||||||
|
lintOnSave: false,
|
||||||
|
devServer: {
|
||||||
|
// overlay: { // 让浏览器 overlay 同时显示警告和错误
|
||||||
|
// warnings: true,
|
||||||
|
// errors: true,
|
||||||
|
// },
|
||||||
|
// hotOnly: true,
|
||||||
|
// open: false, // npm run serve后自动打开页面
|
||||||
|
// https: false, // https:{type:Boolean}
|
||||||
|
// host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
|
||||||
|
// port: 8989, // 开发服务器运行端口号
|
||||||
|
proxy: {
|
||||||
|
'/api': { //代理的名字
|
||||||
|
// target:'http://111.229.30.246:3111/',
|
||||||
|
target: 'http://172.16.1.254:3111/',
|
||||||
|
// target:'http://www.weather.com.cn/',
|
||||||
|
ws: true,
|
||||||
|
changeOrigin: true,
|
||||||
|
pathRewrite:{
|
||||||
|
'^/api':'',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue