Commit 4d13c2bf by huangqy

提交

parent ac114344
......@@ -12,6 +12,7 @@
"@babel/preset-env": "^7.16.11",
"@jiaminghi/data-view": "^2.10.0",
"@types/echarts": "^4.4.3",
"ant-design-vue": "^1.7.5",
"core-js": "^3.6.4",
"echarts": "^4.6.0",
"axios": "^0.21.0",
......
......@@ -5,11 +5,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>平面库监控平台</title>
<title>库内作业监控平台</title>
<script>
window._CONFIG = {};
window._CONFIG['domianURL'] = 'http://192.168.3.130:10029';
window._CONFIG['refreshTime'] = 1000 * 60;
window._CONFIG['refreshTime'] = 1000 * 60 *60;
window._CONFIG['isLTK'] = true
</script>
</head>
......
......@@ -28,9 +28,9 @@
background-repeat: no-repeat;
.title-text {
font-size: 0.4rem;
font-size: 0.39rem;
position: absolute;
bottom: 12px;
bottom: -5px;
left: 50%;
transform: translate(-50%);
}
......
<template>
<div>
<div id="bottomLeftLine" style="width: 8rem;height: 3rem;"></div>
<div id="bottomLeftLine" style="width: 11rem;height: 3rem;"></div>
</div>
</template>
......
......@@ -23,6 +23,12 @@ import '@/common/flexible.js';
import './assets/scss/style.scss';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
//引入echart
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
......
<template>
<div class="bottom-charts">
<div class="bc-chart-item">
<div class="bcci-header">巷道1</div>
<dv-active-ring-chart :config="config1" />
</div>
<dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />
<div class="bc-chart-item">
<div class="bcci-header">巷道2</div>
<dv-active-ring-chart :config="config2" />
</div>
<dv-decoration-2 class="decoration-2" :reverse="true" style="width:5px;" />
<div class="bc-chart-item">
<div class="bcci-header">巷道3</div>
<dv-active-ring-chart :config="config3" />
</div>
<dv-decoration-2 class="decoration-3" :reverse="true" style="width:5px;" />
<div class="bc-chart-item">
<div class="bcci-header">巷道4</div>
<dv-active-ring-chart :config="config4" />
</div>
<dv-decoration-2 class="decoration-3" :reverse="true" style="width:5px;" />
<div class="bc-chart-item">
<div class="bcci-header">巷道5</div>
<dv-active-ring-chart :config="config4" />
</div>
<dv-decoration-2 class="decoration-3" :reverse="true" style="width:5px;" />
<div class="bc-chart-item-right">
<Label-Tag :config="labelConfig" />
</div>
</div>
</template>
<script>
import LabelTag from './LabelTag'
export default {
name: 'BottomCharts',
components: {
LabelTag
},
data () {
return {
config1: {
data: [
{
name: '收费站',
value: 356
},
{
name: '监控中心',
value: 215
},
{
name: '道路外场',
value: 90
},
{
name: '其他',
value: 317
}
],
color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
radius: '65%',
activeRadius: '70%',
digitalFlopStyle: {
fontSize: 20
}
},
config2: {
data: [
{
name: '收费站',
value: 615
},
{
name: '监控中心',
value: 322
},
{
name: '道路外场',
value: 198
},
{
name: '其他',
value: 80
}
],
color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
radius: '65%',
activeRadius: '70%',
digitalFlopStyle: {
fontSize: 20
}
},
config3: {
data: [
{
name: '收费站',
value: 452
},
{
name: '监控中心',
value: 512
},
{
name: '道路外场',
value: 333
},
{
name: '其他',
value: 255
}
],
color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
radius: '65%',
activeRadius: '70%',
digitalFlopStyle: {
fontSize: 20
}
},
config4: {
data: [
{
name: '收费站',
value: 156
},
{
name: '监控中心',
value: 415
},
{
name: '道路外场',
value: 90
},
{
name: '其他',
value: 210
}
],
color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
radius: '65%',
activeRadius: '70%',
digitalFlopStyle: {
fontSize: 20
}
},
labelConfig: {
data: ['收费站', '监控中心', '道路外场', '其他']
}
}
}
}
</script>
<style lang="less">
.bottom-charts {
width: 100%;
height: 100%;
display: flex;
position: relative;
.bc-chart-item {
width: 20%;
height: 100%;
padding-top: 20px;
box-sizing: border-box;
}
.bc-chart-item-right {
width: 14%;
height: 100%;
padding-top: 30px;
box-sizing: border-box;
}
.bcci-header {
height: 50px;
text-align: center;
line-height: 50px;
font-size: 18px;
}
.dv-active-ring-chart {
height: calc(~"100% - 80px");
}
.label-tag {
height: 24px;
}
.active-ring-name {
font-size: 10px !important;
}
.decoration-1, .decoration-2, .decoration-3 {
display: absolute;
left: 0%;
}
}
</style>
......@@ -6,28 +6,13 @@
<icon name="chart-bar"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2 headerTitle">近一月收发物资统计</span>
<span class="fs-xl text mx-2 headerTitle">全年物资收发折线图</span>
</div>
</div>
<div class="bottom-charts-left">
<bottomLeftLine ref="bll"/>
</div>
</div>
<dv-decoration-2 style="height: 3rem;width: 5px;" :reverse="true"/>
<div>
<div class="d-flex pt-2 pl-2">
<span style="color:#5cd9e8">
<icon name="chart-bar"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2 headerTitle">区域垛位状态统计</span>
</div>
</div>
<div class="bottom-charts-right">
<bottomRightBar ref="brb" />
</div>
</div>
</div>
</template>
......@@ -43,8 +28,7 @@ export default {
},
data () {
return {
url: '/firstDynamic/searchStoreByToday',
getGoodsByArea: '/big/getGoodsByArea'
url: '/firstDynamic/searchStoreByToday'
}
},
mounted() {
......@@ -58,9 +42,6 @@ export default {
getAction(window._CONFIG['domianURL'] + this.url, {storeCode: this.$route.query.storeCode, datetime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(2, '0') }).then(res => {
this.$refs.bll.draw(res.data)
})
getAction(window._CONFIG['domianURL'] + this.getGoodsByArea, {storeCode: this.$route.query.storeCode}).then(res => {
this.$refs.brb.draw(res.data)
})
}
}
}
......
<template>
<div class="center-cmp">
<div class="cc-details">
<dv-decoration-1 style="width:150px;height:50px;" />
<div>库存总数</div>
<div class="card">2</div>
<div class="card">1</div>
<div class="card">3</div>
<div class="card">7</div>
<dv-decoration-1 style="width:150px;height:50px;" />
</div>
<div class="cc-header">
<div>机电设备总数</div>
</div>
<div class="cc-main-container">
<div class="ccmc-left">
<div class="station-info">
收费站<span>1315</span>
</div>
<div class="station-info">
监控中心<span>415</span>
</div>
</div>
<dv-active-ring-chart class="ccmc-middle" :config="config" />
<div class="ccmc-right">
<div class="station-info">
<span>90</span>道路外场
</div>
<div class="station-info">
<span>317</span>其他
</div>
</div>
<LabelTag :config="labelConfig" />
</div>
</div>
</template>
<script>
import LabelTag from './LabelTag'
export default {
name: 'CenterCmp',
components: {
LabelTag
},
data () {
return {
config: {
data: [
{
name: '收费站',
value: 1315
},
{
name: '监控中心',
value: 415
},
{
name: '道路外场',
value: 90
},
{
name: '其他',
value: 317
}
],
color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
lineWidth: 30,
radius: '55%',
activeRadius: '60%'
},
labelConfig: {
data: ['收费站', '监控中心', '道路外场', '其他']
}
}
}
}
</script>
<style lang="less">
.center-cmp {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
.cc-header {
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 30px;
}
.cc-details {
height: 70px;
display: flex;
justify-content: center;
font-size: 32px;
align-items: center;
.card {
background-color: rgba(4,49,128,.6);
color: #08e5ff;
height: 70px;
width: 70px;
font-size: 45px;
font-weight: bold;
line-height: 70px;
text-align: center;
margin: 10px;
}
}
.cc-main-container {
position: relative;
flex: 1;
display: flex;
.ccmc-middle {
width: 50%;
height: 90%;
.active-ring-name {
font-size: 20px !important;
}
}
.ccmc-left, .ccmc-right {
width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 24px;
span {
font-size: 40px;
font-weight: bold;
}
.station-info {
height: 80px;
display: flex;
align-items: center;
}
}
.ccmc-left {
align-items: flex-end;
span {
margin-left: 20px;
}
}
.ccmc-right {
align-items: flex-start;
span {
margin-right: 20px;
}
}
}
.label-tag {
position: absolute;
width: 500px;
height: 30px;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
}
</style>
\ No newline at end of file
......@@ -6,7 +6,7 @@
<icon name="chart-bar"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2 headerTitle">发物计划列表</span>
<span class="fs-xl text mx-2 headerTitle">出库计划列表</span>
</div>
</div>
<dv-scroll-board :config="config" style="width: 5.1rem;height: 4.44rem;margin-top: 10px;" />
......@@ -53,15 +53,25 @@ export default {
}
arr.push(itemArr)
})
arr = [
["1仓库", "1A", "钧普", "200", "进行中"],
["2仓库", "1A", "钧普", "200", "进行中"],
["3仓库", "1A", "钧普", "200", "进行中"],
["4仓库", "1A", "钧普", "200", "进行中"],
["5仓库", "1A", "钧普", "200", "进行中"],
["6仓库", "1A", "钧普", "200", "进行中"],
["7仓库", "1A", "钧普", "200", "进行中"],
["8仓库", "1A", "钧普", "200", "进行中"]
]
this.config = {
header: ["凭证字", "发物单位", "库房名", "数量", "任务状态"],
header: ["库房名", "凭证字", "发物单位", "数量", "任务状态"],
data: arr,
rowNum: 7, //表格行数
headerHeight: 35,
headerBGC: "#0C2869", //表头
oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行
evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行
columnWidth: [120, 150,150, 100, 150],
columnWidth: [150, 120, 150, 100, 150],
align: ["center"]
}
})
......
......@@ -6,7 +6,7 @@
<icon name="chart-line"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2 headerTitle">收物计划列表</span>
<span class="fs-xl text mx-2 headerTitle">入库计划列表</span>
</div>
</div>
<dv-scroll-board :config="config" style="width: 5.1rem;height: 4.44rem;margin-top: 10px;" />
......@@ -54,15 +54,25 @@ export default {
}
arr.push(itemArr)
})
arr = [
["1仓库", "1A", "钧普", "200", "进行中"],
["2仓库", "1A", "钧普", "200", "进行中"],
["3仓库", "1A", "钧普", "200", "进行中"],
["4仓库", "1A", "钧普", "200", "进行中"],
["5仓库", "1A", "钧普", "200", "进行中"],
["6仓库", "1A", "钧普", "200", "进行中"],
["7仓库", "1A", "钧普", "200", "进行中"],
["8仓库", "1A", "钧普", "200", "进行中"]
]
this.config = {
header: ["凭证字", "发物单位", "库房名", "数量", "任务状态"],
header: [ "库房名", "凭证字", "发物单位", "数量", "任务状态"],
data: arr,
rowNum: 7, //表格行数
headerHeight: 35,
headerBGC: "#0C2869", //表头
oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行
evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行
columnWidth: [120, 150,150, 100, 150],
columnWidth: [ 150, 120, 150, 100, 150],
align: ["center"]
}
})
......
......@@ -6,14 +6,13 @@
<icon name="chart-line"></icon>
</span>
<div class="d-flex">
<span class="fs-xl text mx-2 headerTitle">作业队列管理</span>
<span class="fs-xl text mx-2 headerTitle">库存过期预警</span>
</div>
</div>
<div class="d-flex jc-center body-box">
<dv-scroll-board :config="config" style="width: 4.6rem;height: 3.2rem"/>
<dv-scroll-board :config="config" style="width: 5rem;height: 4.44rem"/>
</div>
</div>
<dv-decoration-2 style="height:10px;" />
</div>
</template>
......@@ -35,29 +34,39 @@ export default {
},
methods: {
getWorkPage() {
getAction(window._CONFIG['domianURL'] + this.url, {storeCode: this.$route.query.storeCode}).then(res => {
let arr = []
res.data.forEach(element => {
var itemArr = []
itemArr.push(element.areaName)
itemArr.push(element.type == 'OUT'? '出库': '入库')
itemArr.push(element.positionName)
// itemArr.push(element.statusName)
arr.push(itemArr)
})
// getAction(window._CONFIG['domianURL'] + this.url, {storeCode: this.$route.query.storeCode}).then(res => {
// let arr = []
// res.data.forEach(element => {
// var itemArr = []
// itemArr.push(element.areaName)
// itemArr.push(element.type == 'OUT'? '出库': '入库')
// itemArr.push(element.positionName)
// // itemArr.push(element.statusName)
// arr.push(itemArr)
// })
let arr = [
["1仓库", "物资1", "200", "即将过期"],
["2仓库", "物资2", "200", "即将过期"],
["3仓库", "物资3", "200", "即将过期"],
["4仓库", "物资4", "200", "即将过期"],
["5仓库", "物资5", "200", "已过期"],
["6仓库", "物资6", "200", "已过期"],
["7仓库", "物资7", "200", "已过期"],
["8仓库", "物资9", "200", "已过期"]
]
this.config = {
header: ["区域号", "作业类型", "垛位号"],
header: ["库房名称", "物资名称", "数量", "状态"],
data: arr,
rowNum: 5, //表格行数
rowNum: 6, //表格行数
headerHeight: 35,
headerBGC: "#0C2869", //表头
oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行
evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行
index: false,
columnWidth: [100,100,150],
columnWidth: [150, 150, 100, 150],
align: ["center"]
}
})
// })
}
}
};
......
......@@ -5,10 +5,11 @@
<span style="color:#5cd9e8">
<icon name="align-left"></icon>
</span>
<span class="fs-xl text mx-2 headerTitle">库内物资排行</span>
<span class="fs-xl text mx-2 headerTitle">库内物资Top10排行</span>
</div>
<dv-capsule-chart :config="config" style="width: 4.6rem;height: 3.4rem" />
<dv-capsule-chart :config="config" style="width: 5rem;height: 4.44rem" />
</div>
<dv-decoration-2 style="height:10px;" />
</div>
</template>
......@@ -29,21 +30,55 @@ export default {
},
methods: {
getGoodsStock() {
getAction(window._CONFIG['domianURL'] + this.url, {storeCode: this.$route.query.storeCode}).then(res => {
let data = []
res.data.forEach(item => {
const obj = {
name: item.goodsName,
value: item.amount
}
data.push(obj)
})
// getAction(window._CONFIG['domianURL'] + this.url, {storeCode: this.$route.query.storeCode}).then(res => {
// let data = []
// res.data.forEach(item => {
// const obj = {
// name: item.goodsName,
// value: item.amount
// }
// data.push(obj)
// })
let data = [
{
name: '领巾',
value: 275
},
{
name: '睡袋',
value: 200
},
{
name: '棉衣',
value: 167
},
{
name: '棉裤',
value: 123
},
{
name: '军帽',
value: 98
},
{
name: '手套',
value: 75
},
{
name: '西服',
value: 66
},
{
name: '军靴',
value: 62
},
]
this.config = {
data,
unit: '件',
showValue: true
}
})
//})
}
}
};
......
......@@ -8,7 +8,7 @@
<div class="d-flex jc-center">
<dv-decoration-8 :color="['#568aea', '#131E88']" style="width:2.5rem;height:.425rem;" />
<div class="title">
<span class="title-text">平面库监控平台</span>
<span class="title-text">库内作业监控平台</span>
</div>
<dv-decoration-8
:reverse="true"
......@@ -18,47 +18,61 @@
</div>
<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" :color="['#568aea', '#131E88']"/>
</div>
<div class="d-flex jc-center">
<dv-decoration-5 style="width: 500px;height: 30px;margin-bottom: 5px;" :color="['#568aea', '#131E88']"/>
<div class="main-header">
<div class="mh-left">
</div>
<div class="mh-middle">
<dv-decoration-5 style="width: 500px;height: 30px;margin-bottom: 5px;" :color="['#568aea', '#131E88']"/>
</div>
<div class="mh-right">
<dv-border-box-2 style="width: 120px; height: 50px; line-height: 50px; text-align:center;margin-left:300px;cursor:pointer;">
<div @click="queryGoodsData">综合查询</div>
</dv-border-box-2>
</div>
</div>
<dv-border-box-1 class="main-container">
<dv-border-box-10 class="left-chart-container">
<div style="cursor: pointer;font-size: 0.5rem;width: 5.1rem;height: 1.225rem;line-height: 0.645rem; text-align: center;">
<span class="react-before"></span>
<span class="text" style="display: block;">{{dateYear}}</span>
<span class="text" style="display: block;">{{dateDay}}</span>
<div style="font-size: 0.35rem;width: 5.1rem;height: 1.225rem;line-height: 0.625rem; text-align: center; display: flex;">
<span style="display: block;width: 2.55rem">今日入库<br>{{ 200 }}</span>
<span style="display: block;width: 2.55rem">今日出库<br> {{ 898 }}</span>
</div>
<dv-decoration-2 style="height:10px;" />
<centerLeft1 />
<bottomLeft />
</dv-border-box-10>
<div class="right-main-container">
<div class="center-chart-container">
<div class="rmc-top-container">
<dv-border-box-11 title="库内物资">
<center/>
</dv-border-box-11>
<dv-border-box-11 title="库内温湿度">
<centerLeft2/>
</dv-border-box-11>
<dv-border-box-3>
<center-cmp class="rmc-center-container"/>
</dv-border-box-3>
<dv-border-box-10 class="rmc-bottom-container">
<Bottom-Charts />
</dv-border-box-10>
<div class="rmctc-right-container">
<dv-border-box-10 class="rmctc-chart-1">
<centerRight1 />
<centerRight2 />
</dv-border-box-10>
</div>
</div>
<dv-border-box-10 class="rmc-bottom-container">
<Bottom-Charts />
</div>
<div class="right-chart-container">
<dv-border-box-10 class="rmctc-chart-1">
<div style="font-size: 0.5rem;width: 5.1rem;height: 1.225rem;line-height: 0.645rem; text-align: center;">
<span class="react-before"></span>
<span class="text" style="display: block;">{{dateYear}}</span>
<span class="text" style="display: block;">{{dateDay}}</span>
</div>
<dv-decoration-2 style="height:10px;" />
<centerRight2 />
<centerRight1 />
</dv-border-box-10>
</div>
</dv-border-box-1>
<totalQuery ref="query"/>
</div>
</dv-full-screen-container>
</div>
......@@ -71,10 +85,12 @@ import centerLeft2 from "./centerLeft2";
import centerRight1 from "./centerRight1";
import centerRight2 from "./centerRight2";
import center from "./center";
import centerCmp from './CenterCmp'
import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight";
import BottomCharts from "./BottomCharts"
import centerChartBar from "../components/echart/center/centerChartBar"
import totalQuery from "./modal/TotalQuery"
export default {
data () {
return {
......@@ -94,7 +110,9 @@ export default {
bottomLeft,
bottomRight,
BottomCharts,
centerChartBar
centerChartBar,
totalQuery,
centerCmp
},
mounted () {
this.timeFn();
......@@ -112,6 +130,9 @@ export default {
setTimeout(() => {
this.loading = false;
}, 500);
},
queryGoodsData() {
this.$refs.query.visible = true
}
}
};
......@@ -132,9 +153,19 @@ export default {
}
}
.main-header {
height: 30px;
display: flex;
justify-content: space-between;
align-items: flex-end;
.mh-left, .mh-right {
width: 450px;
}
}
.left-chart-container {
width: 24%;
// padding: 10px;
box-sizing: border-box;
.border-box-content {
......@@ -142,17 +173,20 @@ export default {
}
}
.right-main-container {
width: 76%;
.center-chart-container {
width: 52%;
padding-left: 5px;
box-sizing: border-box;
}
.rmc-top-container {
height: 68%;
display: flex;
.right-chart-container {
width: 24%;
padding-left: 5px;
box-sizing: border-box;
}
.rmctc-left-container {
width: 65%;
}
......@@ -162,6 +196,14 @@ export default {
height: 99%;
}
.rmc-top-container {
display: flex;
flex-direction: column;
height: 100%;
}
.rmc-center-container {
height: 70%;
}
.rmc-bottom-container {
height: 30%;
}
......
<template>
<a-modal
title="库内物资查询"
:visible="visible"
:footer="null"
:width="1200"
@cancel="handleCancel">
<div class="table-page-search-wrapper" style="margin-bottom: 15px;">
<a-input v-model="goodsName" @keyup.enter.native="initData" placeholder="请输入物资名称" style="width: 200px;margin-right: 10px;"/>
<a-button type="primary" @click="initData">查询</a-button>
</div>
<a-table rowKey="id" :data-source="data" :columns="columns" :pagination="ipagination" @change="handleTableChange"/>
</a-modal>
</template>
<script>
import { postAction } from '@/api/manage'
export default {
data() {
return {
visible: false,
url: '/store/analyze/monthStockStatisticsDetails',
ipagination:{
current: 1,
pageSize: 6,
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
total: 0
},
data: [],
goodsName: '',
columns: [
{
title: '序号',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
},
{
title: '物资名称',
dataIndex: 'typeName'
},
{
title: '物资编码',
dataIndex: 'brandName',
},
{
title: '库房名称',
dataIndex: 'modelName',
},
{
title: '数量',
dataIndex: 'sum'
},
]
};
},
methods: {
showModal() {
this.visible = true;
this.initData()
},
initData() {
var params = {}
params.pageNo = this.ipagination.current;
params.pageSize = this.ipagination.pageSize;
params.goodsName = this.goodsName
postAction(this.url, params).then(res => {
this.data = res.data.records;
this.ipagination.total = res.data.total;
})
},
handleCancel(e) {
this.visible = false;
},
handleTableChange(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
//TODO 筛选
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
}
this.ipagination = pagination;
this.initData();
}
},
};
</script>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论