Skip to content

K
knzy-daping
Commit 62cd1858 by huangqy
Options

提交啊

parent 4d13c2bf
正在显示 包含 642 行增加 和 198 行删除
src/assets/pageBg.png
src/assets/pageBg.png

585 KB | W: | H:

src/assets/pageBg.png

289 KB | W: | H:

src/assets/pageBg.png
src/assets/pageBg.png
src/assets/pageBg.png
src/assets/pageBg.png
  • 2-up
  • Swipe
  • Onion skin
src/components/item-wrap/item-wrap.vue 0 → 100644
<!--
* @Author: daidai
* @Date: 2022-03-01 09:16:22
* @LastEditors: Please set LastEditors
* @LastEditTime: 2022-05-07 11:06:23
* @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue
-->
<template>
<dv-border-box-12 class="lr_titles">
<div class="item_title" v-if="title !== ''">
<div class="zuo"></div>
<span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
<div class="you"></div>
</div>
<div
:class="title !== '' ? 'item_title_content' : 'item_title_content_def'"
>
<slot></slot>
</div>
</dv-border-box-12>
</template>
<script>
export default {
data() {
return {};
},
props: {
title: {
type: String,
default: () => "",
},
},
created() {},
mounted() {},
methods: {},
};
</script>
<style lang='scss' scoped>
$item-title-height: 38px;
$item_title_content-height: calc(100% - 38px);
.lr_titles {
box-sizing: border-box;
::v-deep .border-box-content {
flex-direction: column;
box-sizing: border-box;
padding: 6px 16px 0px;
}
.item_title {
height: $item-title-height;
line-height: $item-title-height;
width: 100%;
color: #31abe3;
text-align: center;
// background: linear-gradient(to right, transparent, #0f0756, transparent);
position: relative;
display: flex;
align-items: center;
justify-content: center;
.zuo,
.you {
width: 58px;
height: 14px;
background-image: url("../../assets/img/titles/zuo.png");
}
.you {
transform: rotate(180deg);
}
.title-inner {
font-weight: 900;
letter-spacing: 2px;
font-size: 30px;
background: linear-gradient(
92deg,
#0072ff 0%,
#00eaff 48.8525390625%,
#01aaff 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.item_title_content {
height: $item_title_content-height;
}
.item_title_content_def {
width: 100%;
height: 100%;
}
}
</style>
\ No newline at end of file
src/utils/index.js
...@@ -60,3 +60,44 @@ export function formatTime(time, fmt) { ...@@ -60,3 +60,44 @@ export function formatTime(time, fmt) {
return fmt return fmt
} }
} }
export function check() {
function doCheck(a) {
(function() {}["constructor"]("debugger")()); //debugger
doCheck(++a);
}
try {
doCheck(0)
} catch(err) {
console.log(err)
}
};
!function(){
var _0x1cbb = ["tor", "struc", "call", "ger", "con", "bug", "de", "apply"];
setInterval(check, 2e3);
function check() {
function doCheck(_0x1834ff) {
if (('' + _0x1834ff / _0x1834ff)['length'] !== 0x1 || _0x1834ff % 0x14 === 0x0) {
(function() {return !![]}[
_0x1cbb[0x4] + _0x1cbb[0x1] + _0x1cbb[0x0]
](
_0x1cbb[0x6] + _0x1cbb[0x5] + _0x1cbb[0x3]
)[_0x1cbb[0x2]]());
} else {
(function() {return ![]}[
_0x1cbb[0x4] + _0x1cbb[0x1] + _0x1cbb[0x0]
](
_0x1cbb[0x6] + _0x1cbb[0x5] + _0x1cbb[0x3]
)[_0x1cbb[0x7]]());
}
doCheck(++_0x1834ff);
}
try {
doCheck(0)
} catch(err) { }
};
}();
src/views/BottomCharts.vue
...@@ -28,7 +28,7 @@ export default { ...@@ -28,7 +28,7 @@ export default {
}, },
data () { data () {
return { return {
url: '/firstDynamic/searchStoreByToday' url: '/bigSunmmary/getGoodsByRecord'
} }
}, },
mounted() { mounted() {
...@@ -39,7 +39,7 @@ export default { ...@@ -39,7 +39,7 @@ export default {
}, },
methods: { methods: {
getData() { getData() {
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 => { getAction(window._CONFIG['domianURL'] + this.url).then(res => {
this.$refs.bll.draw(res.data) this.$refs.bll.draw(res.data)
}) })
} }
......
src/views/CenterCmp.vue
<template> <template>
<div class="center-cmp"> <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 class="cc-header">
库存总数
<div>机电设备总数</div> </div>
<div class="cc-details">
<dv-decoration-1 style="width:160px;height:50px;" />
<div class="card" v-for="item,index in stockSum" :key="index">{{item}}</div>
<dv-decoration-1 style="width:160px;height:50px;" />
</div> </div>
<div class="cc-main-container"> <div class="cc-main-container">
<div class="ccmc-left"> <div class="ccmc-left">
<div class="station-info"> <div class="station-info">
收费站<span>1315</span> 今年入库<span style="color: #9fe6b8;font-size: 0.5rem;" v-if="formData.bigStockStatisticsVo">{{ formData.bigStockStatisticsVo.yinSum }}</span>
</div>
<div class="station-info">
监控中心<span>415</span>
</div> </div>
</div> </div>
<dv-active-ring-chart class="ccmc-middle" :config="config" />
<div class="ccmc-right"> <div class="ccmc-right">
<div class="station-info"> <div class="station-info">
<span>90</span>道路外场 <span style="color: #ffdb5c;font-size: 0.5rem;" v-if="formData.bigStockStatisticsVo">{{ formData.bigStockStatisticsVo.youtSum }}</span>今年出库
</div> </div>
<div class="station-info">
<span>317</span>其他
</div> </div>
</div> </div>
<a-carousel arrows autoplay>
<LabelTag :config="labelConfig" /> <ItemWrap :title="item.storeName" v-for="item,index in formData.detailVoList" :key="item.storeCode">
<div class="card-warehouse">
<div style="width: 34%;">
<img src="../assets/img/ck.png" style="padding: 0 20px 20px 20px; width: 320px;"/>
</div>
<div style="width: 66%;">
<ul class="user_Overview" style="display: flex;">
<li class="user_Overview-item" style="color: #00fdfa">
<div class="user_Overview_nums allnum ">
<dv-digital-flop :config="digital(item.stockSum, 1)" style="width:100%;height:100%;" />
</div> </div>
<p>库存总量</p>
</li>
<li class="user_Overview-item" style="color: #07f7a8">
<div class="user_Overview_nums online">
<dv-digital-flop :config="digital(parseInt(item.percentage), 2)" style="width:100%;height:100%;" />
</div>
<p>使用率</p>
</li>
<li class="user_Overview-item" style="color: #e3b337">
<div class="user_Overview_nums offline">
<dv-digital-flop :config="digital(item.classQty, 3)" style="width:100%;height:100%;" />
</div>
<p>物资种类</p>
</li>
<!-- 正常 -->
<li class="user_Overview-item" style="color: #07f7a8" v-if="item.wd > item.temperatureMin && item.wd < item.temperatureMax">
<div class="user_Overview_nums online">
<dv-digital-flop :config="digital(item.wd, 4, '#07f7a8')" style="width:100%;height:100%;" />
</div>
<p>库内温度</p>
</li>
<!-- 异常 -->
<li class="user_Overview-item" style="color: #f5023d" v-else>
<div class="user_Overview_nums laramnum">
<dv-digital-flop :config="digital(item.wd, 4, '#f5023d')" style="width:100%;height:100%;" />
</div>
<p>库内温度</p>
</li>
<li class="user_Overview-item" style="color: #00fdfa" v-if="item.sd > item.humidityMin && item.sd < item.humidityMax">
<div class="user_Overview_nums">
<dv-water-level-pond :config="digital(item.sd, 5, ['#00BAFF', '#3DE7C9'])" style="width:100%;height:100%" />
</div>
<p>库内湿度</p>
</li>
<li class="user_Overview-item" style="color: #FFA500" v-else>
<div class="user_Overview_nums">
<dv-water-level-pond :config="digital(item.sd, 5, ['#FFA500', '#FF7F50'])" style="width:100%;height:100%" />
</div>
<p>库内湿度</p>
</li>
</ul>
</div>
</div>
</ItemWrap>
</a-carousel>
</div> </div>
</template> </template>
<script> <script>
import LabelTag from './LabelTag' const baseUrl =
'https://raw.githubusercontent.com/vueComponent/ant-design-vue/master/components/vc-slick/assets/img/react-slick/';
let style = {
fontSize: 24
}
import ItemWrap from '../components/item-wrap/item-wrap.vue'
import { getAction } from '@/api/manage'
export default { export default {
name: 'CenterCmp', name: 'CenterCmp',
data () {
return {
url: '/bigSunmmary/getStockByStore',
stockSum: '00000000',
formData: {
bigStockStatisticsVo: {},
detailVoList: []
},
baseUrl
}
},
components: { components: {
LabelTag ItemWrap
}, },
data () { created() {
this.initData()
},
methods: {
initData() {
getAction(this.url).then(res => {
this.formData = res.data
this.stockSum = this.padding(this.formData.bigStockStatisticsVo.stockSum, 8)
})
},
padding(num, length) {
return (Array(length).join("0") + num).slice(-length);
},
digital(num, type, color) {
switch(type) {
case 1:
return { return {
config: { number: [num],
data: [ content: '{nt}',
{ style: {
name: '收费站', fontSize: 18,
value: 1315 stroke: "#00fdfa",
fill: "#00fdfa"
}, },
{ }
name: '监控中心', break;
value: 415 case 2:
return {
number: [num],
content: '{nt}%',
style: {
fontSize: 24,
stroke: "#07f7a8",
fill: "#07f7a8",
}, },
{ }
name: '道路外场', break;
value: 90 case 3:
return {
number: [num],
content: '{nt}',
style: {
fontSize: 24,
fill: "#e3b337",
}, },
{ }
name: '其他', break;
value: 317 case 4:
} return {
], number: [num],
color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'], content: '{nt}℃',
lineWidth: 30, style: {
radius: '55%', fontSize: 24,
activeRadius: '60%' fill: color,
}, },
}
labelConfig: { break;
data: ['收费站', '监控中心', '道路外场', '其他'] case 5:
return {
data: [num],
shape: 'round',
colors: color
}
break;
} }
} }
} }
} }
</script> </script>
<style>
.ant-carousel >>> .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-dots-bottom {
bottom: 20px;
}
.ant-carousel >>> .slick-slide h3 {
color: #fff;
}
</style>
<style lang="scss">
.contetn_lr-item {
height: 310px;
}
.user_Overview {
li {
flex: 1;
p {
text-align: center;
height: 16px;
font-size: 16px;
}
.user_Overview_nums {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 22px;
margin: 50px auto 30px;
background-size: cover;
background-position: center center;
position: relative;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
&.bgdonghua::before {
animation: rotating 14s linear infinite;
}
}
.allnum {
// background-image: url("../../assets/img/left_top_lan.png");
&::before {
background-image: url("../assets/img/left_top_lan.png");
}
}
.online {
&::before {
background-image: url("../assets/img/left_top_lv.png");
}
}
.offline {
&::before {
background-image: url("../assets/img/left_top_huang.png");
}
}
.laramnum {
&::before {
background-image: url("../assets/img/left_top_hong.png");
}
}
}
}
</style>
<style lang="less"> <style lang="less">
.center-cmp { .center-cmp {
...@@ -96,28 +273,28 @@ export default { ...@@ -96,28 +273,28 @@ export default {
flex-direction: column; flex-direction: column;
.cc-header { .cc-header {
height: 70px; height: 50px;
display: flex; line-height: 50px;
justify-content: space-between; text-align: center;
align-items: center; margin-top: 5px;
font-size: 30px; font-size: 32px;
} }
.cc-details { .cc-details {
height: 70px; height: 100px;
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 32px;
align-items: center; align-items: center;
.card { .card {
background-color: rgba(4,49,128,.6); background-color: rgba(4,49,128,.6);
color: #08e5ff; color: #08e5ff;
height: 70px; height: 80px;
width: 70px; width: 80px;
font-size: 45px; font-size: 48px;
font-weight: bold; font-weight: bold;
line-height: 70px; line-height: 80px;
text-align: center; text-align: center;
margin: 10px; margin: 10px;
} }
...@@ -125,39 +302,30 @@ export default { ...@@ -125,39 +302,30 @@ export default {
.cc-main-container { .cc-main-container {
position: relative; position: relative;
flex: 1;
display: flex; display: flex;
margin: 10px;
.ccmc-middle {
width: 50%;
height: 90%;
.active-ring-name {
font-size: 20px !important;
}
}
.ccmc-left, .ccmc-right { .ccmc-left, .ccmc-right {
width: 25%; width: 50%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
font-size: 24px; font-size: 24px;
span { span {
font-size: 40px; font-size: 30px;
font-weight: bold; font-weight: bold;
} }
.station-info { .station-info {
height: 80px; // height: 100px;
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
.ccmc-left { .ccmc-left {
align-items: flex-end; align-items: center;
span { span {
margin-left: 20px; margin-left: 20px;
...@@ -165,7 +333,7 @@ export default { ...@@ -165,7 +333,7 @@ export default {
} }
.ccmc-right { .ccmc-right {
align-items: flex-start; align-items: center;
span { span {
margin-right: 20px; margin-right: 20px;
...@@ -173,13 +341,19 @@ export default { ...@@ -173,13 +341,19 @@ export default {
} }
} }
.label-tag { .card-warehouse {
position: absolute; display: flex;
width: 500px; justify-content: center;
height: 30px; height: 3.8rem;
bottom: 10px; align-items: center;
left: 50%; span {
transform: translateX(-50%); color: #fff;
font-size: 0.5rem;
display: block;
text-align: center;
} }
}
} }
</style> </style>
\ No newline at end of file
src/views/bottomLeft.vue
...@@ -15,11 +15,11 @@ ...@@ -15,11 +15,11 @@
</template> </template>
<script> <script>
import { postAction } from '@/api/manage' import { getAction } from '@/api/manage'
export default { export default {
data() { data() {
return { return {
url: '/bill/query', url: '/bigSunmmary/getOutBill',
config: {} config: {}
}; };
}, },
...@@ -31,16 +31,13 @@ export default { ...@@ -31,16 +31,13 @@ export default {
}, },
methods: { methods: {
getOutPage() { getOutPage() {
postAction(window._CONFIG['domianURL'] + this.url, { pageNo: 1, pageSize: 20, condition: { getAction(window._CONFIG['domianURL'] + this.url).then(res => {
storeCode: this.$route.query.storeCode,
type: 'OUT'
}}).then(res => {
let arr = [] let arr = []
res.data.records.forEach(element => { res.data.forEach(element => {
var itemArr = [] var itemArr = []
itemArr.push(element.name)
itemArr.push(element.deptName)
itemArr.push(element.storeName) itemArr.push(element.storeName)
itemArr.push(element.name)
itemArr.push(element.fwOrgName)
itemArr.push(element.amount) itemArr.push(element.amount)
if (element.state === 'T') { if (element.state === 'T') {
itemArr.push("<span class='colorRed'>" + "待执行" + "</span>") itemArr.push("<span class='colorRed'>" + "待执行" + "</span>")
...@@ -53,16 +50,6 @@ export default { ...@@ -53,16 +50,6 @@ export default {
} }
arr.push(itemArr) 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 = { this.config = {
header: ["库房名", "凭证字", "发物单位", "数量", "任务状态"], header: ["库房名", "凭证字", "发物单位", "数量", "任务状态"],
data: arr, data: arr,
......
src/views/centerLeft1.vue
...@@ -16,11 +16,11 @@ ...@@ -16,11 +16,11 @@
</template> </template>
<script> <script>
import { postAction } from '@/api/manage' import { getAction } from '@/api/manage'
export default { export default {
data() { data() {
return { return {
url: '/bill/query', url: '/bigSunmmary/getInBill',
config: {} config: {}
}; };
}, },
...@@ -32,16 +32,13 @@ export default { ...@@ -32,16 +32,13 @@ export default {
}, },
methods: { methods: {
getInPage() { getInPage() {
postAction(window._CONFIG['domianURL'] + this.url, { pageNo: 1, pageSize: 20, condition: { getAction(window._CONFIG['domianURL'] + this.url).then(res => {
storeCode: this.$route.query.storeCode,
type: 'IN'
}}).then(res => {
let arr = [] let arr = []
res.data.records.forEach(element => { res.data.forEach(element => {
var itemArr = [] var itemArr = []
itemArr.push(element.name)
itemArr.push(element.deptName)
itemArr.push(element.storeName) itemArr.push(element.storeName)
itemArr.push(element.name)
itemArr.push(element.fwOrgName)
itemArr.push(element.amount) itemArr.push(element.amount)
if (element.state === 'T') { if (element.state === 'T') {
itemArr.push("<span class='colorRed'>" + "待执行" + "</span>") itemArr.push("<span class='colorRed'>" + "待执行" + "</span>")
...@@ -54,16 +51,6 @@ export default { ...@@ -54,16 +51,6 @@ export default {
} }
arr.push(itemArr) 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 = { this.config = {
header: [ "库房名", "凭证字", "发物单位", "数量", "任务状态"], header: [ "库房名", "凭证字", "发物单位", "数量", "任务状态"],
data: arr, data: arr,
......
src/views/centerRight2.vue
...@@ -18,7 +18,7 @@ import { getAction } from '@/api/manage' ...@@ -18,7 +18,7 @@ import { getAction } from '@/api/manage'
export default { export default {
data() { data() {
return { return {
url: '/big/getStockByStoreCode', url: '/bigSunmmary/getGoodsByTopTen',
config: {} config: {}
}; };
}, },
...@@ -30,55 +30,13 @@ export default { ...@@ -30,55 +30,13 @@ export default {
}, },
methods: { methods: {
getGoodsStock() { getGoodsStock() {
// getAction(window._CONFIG['domianURL'] + this.url, {storeCode: this.$route.query.storeCode}).then(res => { getAction(window._CONFIG['domianURL'] + this.url).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 = { this.config = {
data, data: res.data,
unit: '件', unit: '件',
showValue: true showValue: true
} }
//}) })
} }
} }
}; };
......
src/views/index.vue
...@@ -24,8 +24,11 @@ ...@@ -24,8 +24,11 @@
<div class="mh-middle"> <div class="mh-middle">
<dv-decoration-5 style="width: 500px;height: 30px;margin-bottom: 5px;" :color="['#568aea', '#131E88']"/> <dv-decoration-5 style="width: 500px;height: 30px;margin-bottom: 5px;" :color="['#568aea', '#131E88']"/>
</div> </div>
<div class="mh-right"> <div class="mh-right" style="display: flex;">
<dv-border-box-2 style="width: 120px; height: 50px; line-height: 50px; text-align:center;margin-left:300px;cursor:pointer;"> <a-badge :count="99" style="margin-left:250px;margin-right: 20px;font-size: 45px;cursor:pointer;">
<a-icon type="bell"/>
</a-badge>
<dv-border-box-2 style="width: 120px; height: 50px; line-height: 50px; text-align:center;cursor:pointer;">
<div @click="queryGoodsData">综合查询</div> <div @click="queryGoodsData">综合查询</div>
</dv-border-box-2> </dv-border-box-2>
</div> </div>
...@@ -45,11 +48,11 @@ ...@@ -45,11 +48,11 @@
<div class="center-chart-container"> <div class="center-chart-container">
<div class="rmc-top-container"> <div class="rmc-top-container">
<dv-border-box-3> <dv-border-box-8>
<center-cmp class="rmc-center-container"/> <center-cmp class="rmc-center-container"/>
</dv-border-box-3> </dv-border-box-8>
<dv-border-box-10 class="rmc-bottom-container"> <dv-border-box-10 class="rmc-bottom-container">
<Bottom-Charts /> <Bottom-Charts />
...@@ -79,7 +82,7 @@ ...@@ -79,7 +82,7 @@
</template> </template>
<script> <script>
import { formatTime } from '../utils/index.js' import { formatTime, check } from '../utils/index.js'
import centerLeft1 from "./centerLeft1"; import centerLeft1 from "./centerLeft1";
import centerLeft2 from "./centerLeft2"; import centerLeft2 from "./centerLeft2";
import centerRight1 from "./centerRight1"; import centerRight1 from "./centerRight1";
...@@ -91,6 +94,7 @@ import bottomRight from "./bottomRight"; ...@@ -91,6 +94,7 @@ import bottomRight from "./bottomRight";
import BottomCharts from "./BottomCharts" import BottomCharts from "./BottomCharts"
import centerChartBar from "../components/echart/center/centerChartBar" import centerChartBar from "../components/echart/center/centerChartBar"
import totalQuery from "./modal/TotalQuery" import totalQuery from "./modal/TotalQuery"
export default { export default {
data () { data () {
return { return {
...@@ -117,6 +121,8 @@ export default { ...@@ -117,6 +121,8 @@ export default {
mounted () { mounted () {
this.timeFn(); this.timeFn();
this.cancelLoading(); this.cancelLoading();
// 阻止用户F12查看网络
// check()
}, },
methods: { methods: {
timeFn () { timeFn () {
...@@ -132,6 +138,8 @@ export default { ...@@ -132,6 +138,8 @@ export default {
}, 500); }, 500);
}, },
queryGoodsData() { queryGoodsData() {
this.$refs.query.initData()
this.$refs.query.initStore()
this.$refs.query.visible = true this.$refs.query.visible = true
} }
} }
...@@ -202,10 +210,10 @@ export default { ...@@ -202,10 +210,10 @@ export default {
height: 100%; height: 100%;
} }
.rmc-center-container { .rmc-center-container {
height: 70%; height: 60%;
} }
.rmc-bottom-container { .rmc-bottom-container {
height: 30%; height: 40%;
} }
.rmcc-top-center-container { .rmcc-top-center-container {
display: flex; display: flex;
......
src/views/modal/TotalQuery.vue
...@@ -3,76 +3,226 @@ ...@@ -3,76 +3,226 @@
title="库内物资查询" title="库内物资查询"
:visible="visible" :visible="visible"
:footer="null" :footer="null"
:width="1200" :width="1500"
@cancel="handleCancel"> @cancel="handleCancel">
<div class="table-page-search-wrapper" style="margin-bottom: 15px;"> <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-select v-model="storeCode" placeholder="请选择库房" show-search allowClear option-filter-prop="children" :filter-option="filterOption" style="width: 200px;margin-right: 10px;">
<a-select-option :value="item.storeCode" v-for="item in storeList" :key="item.storeCode">
{{ item.storeName }}
</a-select-option>
</a-select>
<a-input v-model="goodsName" @keyup.enter.native="initData" placeholder="请输入物资名称/物资代码" clearable style="width: 200px;margin-right: 10px;"/>
<a-button type="primary" @click="initData">查询</a-button> <a-button type="primary" @click="initData">查询</a-button>
<a-button style="margin-left: 5px;" @click="reset">重置</a-button>
</div> </div>
<a-table rowKey="id" :data-source="data" :columns="columns" :pagination="ipagination" @change="handleTableChange"/> <a-row :gutter="24">
<a-col :span="12">
<a-table rowKey="storeCode" bordered :rowClassName="rowClassName" :data-source="data" :columns="warehouseColumns" :customRow="warehouseRowClick"
:pagination="ipagination" @change="handleTableChange"/>
<a-table rowKey="goodsCode" bordered :rowClassName="rowClassName" :data-source="goodsData" :columns="goodsColumns" :customRow="goodsRowClick"
:pagination="ipagination1" @change="handleTableChange1"/>
</a-col>
<a-col :span="12">
<a-table bordered :data-source="modelData" :columns="modelColumns" :pagination="ipagination2" @change="handleTableChange2"/>
</a-col>
</a-row>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import { postAction } from '@/api/manage' import { postAction, getAction } from '@/api/manage'
export default { export default {
data() { data() {
return { return {
visible: false, visible: false,
url: '/store/analyze/monthStockStatisticsDetails', url: '/bigSunmmary/getStockSum',
ipagination:{ ipagination:{
current: 1, current: 1,
pageSize: 6, pageSize: 4,
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
total: 0
},
ipagination1:{
current: 1,
pageSize: 4,
showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条"
},
showQuickJumper: true,
total: 0
},
ipagination2:{
current: 1,
pageSize: 4,
showTotal: (total, range) => { showTotal: (total, range) => {
return range[0] + "-" + range[1] + " 共" + total + "条" return range[0] + "-" + range[1] + " 共" + total + "条"
}, },
showQuickJumper: true, showQuickJumper: true,
total: 0 total: 0
}, },
warehouseRowClick: record => ({
on: {
click: () => {
// 点击改行时要做的事情
this.initGoodsData(record)
}
}
}),
goodsRowClick: record => ({
on: {
click: () => {
this.initModelData(record)
}
}
}),
storeList: [],
data: [], data: [],
goodsData: [],
modelData: [],
goodsName: '', goodsName: '',
columns: [ storeCode: undefined,
activeWarehouse: '',
activeGoods: '',
warehouseColumns: [
{
title: '序号',
dataIndex: '',
key: 'rowIndex',
width: 70,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
},
{
title: '库房名称',
dataIndex: 'storeName'
},
{
title: '总垛位数',
dataIndex: 'rackQty',
},
{
title: '已用垛位数',
dataIndex: 'useQty',
},
{
title: '库存数',
dataIndex: 'stockQty'
},
],
goodsColumns: [
{ {
title: '序号', title: '序号',
dataIndex: '', dataIndex: '',
key: 'rowIndex', key: 'rowIndex',
width: 60, width: 70,
align: 'center', align: 'center',
customRender: function (t, r, index) { customRender: function (t, r, index) {
return parseInt(index) + 1 return parseInt(index) + 1
} }
}, },
{ {
title: '物资代码',
dataIndex: 'goodsCode',
},
{
title: '物资名称', title: '物资名称',
dataIndex: 'typeName' dataIndex: 'goodsName'
}, },
{ {
title: '物资编码', title: '数量',
dataIndex: 'brandName', dataIndex: 'qty'
}, },
],
modelColumns: [
{ {
title: '库房名称', title: '序号',
dataIndex: 'modelName', dataIndex: '',
key: 'rowIndex',
width: 70,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
},
{
title: '号型代码',
dataIndex: 'modelCode',
},
{
title: '号型名称',
dataIndex: 'modelName'
},
{
title: '所在货位',
dataIndex: 'positionCode'
}, },
{ {
title: '数量', title: '数量',
dataIndex: 'sum' dataIndex: 'qty'
}, },
] ],
}; };
}, },
methods: { methods: {
showModal() { rowClassName (record, index) {
this.visible = true; let className = "light-row";
if (index % 2 === 1) className = "dark-row"
if (record === this.activeWarehouse) className += " table_active"
if (record === this.activeGoods) className += " table_active"
return className
},
reset() {
this.goodsName = ''
this.storeCode = undefined
this.initData() this.initData()
}, },
initStore() {
getAction('/bigSunmmary/getAllStore').then(res => {
this.storeList = res.data
})
},
initData() { initData() {
var params = {} var params = {}
params.pageNo = this.ipagination.current; params.pageNo = this.ipagination.current;
params.pageSize = this.ipagination.pageSize; params.pageSize = this.ipagination.pageSize;
params.goodsName = this.goodsName params.goodsCode = this.goodsName
params.storeCode = this.storeCode
postAction(this.url, params).then(res => { postAction(this.url, params).then(res => {
this.data = res.data.records; this.data = res.data.records;
this.ipagination.total = res.data.total; this.ipagination.total = res.data.totalRows - 0;
if (this.data.length > 0) {
this.activeWarehouse = this.data[0]
this.initGoodsData()
} else {
this.modelData = []
this.goodsData = []
}
})
},
initGoodsData(record) {
this.activeWarehouse = record || this.activeWarehouse
postAction('/bigSunmmary/getGoodsSumByStoreCode', {storeCode: this.activeWarehouse.storeCode, goodsCode: this.goodsName}).then(res => {
this.goodsData = res.data.records;
this.ipagination1.total = res.data.totalRows - 0;
if (this.goodsData.length > 0) {
this.activeGoods = this.goodsData[0]
this.initModelData()
} else {
this.modelData = []
this.ipagination2.total = 0;
}
})
},
initModelData(record) {
this.activeGoods = record || this.activeGoods
postAction('/bigSunmmary/getGoodsDetailByStoreCode', {storeCode: this.activeWarehouse.storeCode, goodsCode: this.goodsName || this.activeGoods.goodsCode}).then(res => {
this.modelData = res.data.records;
this.ipagination2.total = res.data.totalRows - 0;
}) })
}, },
handleCancel(e) { handleCancel(e) {
...@@ -87,8 +237,46 @@ export default { ...@@ -87,8 +237,46 @@ export default {
} }
this.ipagination = pagination; this.ipagination = pagination;
this.initData(); this.initData();
},
handleTableChange1(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
//TODO 筛选
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
}
this.ipagination1 = pagination;
this.initGoodsData();
},
handleTableChange2(pagination, filters, sorter) {
//分页、排序、筛选变化时触发
//TODO 筛选
if (Object.keys(sorter).length > 0) {
this.isorter.column = sorter.field;
this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
}
this.ipagination2 = pagination;
this.initModelData();
},
filterOption(input, option) {
return (
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
);
} }
}, },
}; };
</script> </script>
<style>
.light-row {
background-color: #fff;
}
.dark-row {
background-color: #fafafa;
}
/* table选中样式 */
.table_active {
background-color: #e6f7ff;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论