Skip to content

K
knzy-daping
Commit 4d13c2bf by huangqy
Options

提交

parent ac114344
正在显示 包含 467 行增加 和 308 行删除
package.json
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"@babel/preset-env": "^7.16.11", "@babel/preset-env": "^7.16.11",
"@jiaminghi/data-view": "^2.10.0", "@jiaminghi/data-view": "^2.10.0",
"@types/echarts": "^4.4.3", "@types/echarts": "^4.4.3",
"ant-design-vue": "^1.7.5",
"core-js": "^3.6.4", "core-js": "^3.6.4",
"echarts": "^4.6.0", "echarts": "^4.6.0",
"axios": "^0.21.0", "axios": "^0.21.0",
......
public/index.html
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
<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>平面库监控平台</title> <title>库内作业监控平台</title>
<script> <script>
window._CONFIG = {}; window._CONFIG = {};
window._CONFIG['domianURL'] = 'http://192.168.3.130:10029'; window._CONFIG['domianURL'] = 'http://192.168.3.130:10029';
window._CONFIG['refreshTime'] = 1000 * 60; window._CONFIG['refreshTime'] = 1000 * 60 *60;
window._CONFIG['isLTK'] = true window._CONFIG['isLTK'] = true
</script> </script>
</head> </head>
......
src/assets/scss/index.scss
...@@ -28,9 +28,9 @@ ...@@ -28,9 +28,9 @@
background-repeat: no-repeat; background-repeat: no-repeat;
.title-text { .title-text {
font-size: 0.4rem; font-size: 0.39rem;
position: absolute; position: absolute;
bottom: 12px; bottom: -5px;
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
} }
......
src/components/echart/bottom/bottomLeftLine.vue
<template> <template>
<div> <div>
<div id="bottomLeftLine" style="width: 8rem;height: 3rem;"></div> <div id="bottomLeftLine" style="width: 11rem;height: 3rem;"></div>
</div> </div>
</template> </template>
......
src/main.js
...@@ -23,6 +23,12 @@ import '@/common/flexible.js'; ...@@ -23,6 +23,12 @@ import '@/common/flexible.js';
import './assets/scss/style.scss'; import './assets/scss/style.scss';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
//引入echart //引入echart
import echarts from 'echarts' import echarts from 'echarts'
Vue.prototype.$echarts = echarts Vue.prototype.$echarts = echarts
......
src/views/BottomCharts copy.vue deleted 100644 → 0
<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>
src/views/BottomCharts.vue
...@@ -6,28 +6,13 @@ ...@@ -6,28 +6,13 @@
<icon name="chart-bar"></icon> <icon name="chart-bar"></icon>
</span> </span>
<div class="d-flex"> <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> </div>
<div class="bottom-charts-left"> <div class="bottom-charts-left">
<bottomLeftLine ref="bll"/> <bottomLeftLine ref="bll"/>
</div> </div>
</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> </div>
</template> </template>
...@@ -43,8 +28,7 @@ export default { ...@@ -43,8 +28,7 @@ export default {
}, },
data () { data () {
return { return {
url: '/firstDynamic/searchStoreByToday', url: '/firstDynamic/searchStoreByToday'
getGoodsByArea: '/big/getGoodsByArea'
} }
}, },
mounted() { mounted() {
...@@ -58,9 +42,6 @@ export default { ...@@ -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 => { 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) 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)
})
} }
} }
} }
......
src/views/CenterCmp.vue 0 → 100644
<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
src/views/bottomLeft.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<icon name="chart-bar"></icon> <icon name="chart-bar"></icon>
</span> </span>
<div class="d-flex"> <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> </div>
<dv-scroll-board :config="config" style="width: 5.1rem;height: 4.44rem;margin-top: 10px;" /> <dv-scroll-board :config="config" style="width: 5.1rem;height: 4.44rem;margin-top: 10px;" />
...@@ -53,15 +53,25 @@ export default { ...@@ -53,15 +53,25 @@ 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,
rowNum: 7, //表格行数 rowNum: 7, //表格行数
headerHeight: 35, headerHeight: 35,
headerBGC: "#0C2869", //表头 headerBGC: "#0C2869", //表头
oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行 oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行
evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行 evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行
columnWidth: [120, 150,150, 100, 150], columnWidth: [150, 120, 150, 100, 150],
align: ["center"] align: ["center"]
} }
}) })
......
src/views/centerLeft1.vue
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<icon name="chart-line"></icon> <icon name="chart-line"></icon>
</span> </span>
<div class="d-flex"> <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> </div>
<dv-scroll-board :config="config" style="width: 5.1rem;height: 4.44rem;margin-top: 10px;" /> <dv-scroll-board :config="config" style="width: 5.1rem;height: 4.44rem;margin-top: 10px;" />
...@@ -54,15 +54,25 @@ export default { ...@@ -54,15 +54,25 @@ 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,
rowNum: 7, //表格行数 rowNum: 7, //表格行数
headerHeight: 35, headerHeight: 35,
headerBGC: "#0C2869", //表头 headerBGC: "#0C2869", //表头
oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行 oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行
evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行 evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行
columnWidth: [120, 150,150, 100, 150], columnWidth: [ 150, 120, 150, 100, 150],
align: ["center"] align: ["center"]
} }
}) })
......
src/views/centerRight1.vue
...@@ -6,14 +6,13 @@ ...@@ -6,14 +6,13 @@
<icon name="chart-line"></icon> <icon name="chart-line"></icon>
</span> </span>
<div class="d-flex"> <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> </div>
<div class="d-flex jc-center body-box"> <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>
</div> </div>
<dv-decoration-2 style="height:10px;" />
</div> </div>
</template> </template>
...@@ -35,29 +34,39 @@ export default { ...@@ -35,29 +34,39 @@ export default {
}, },
methods: { methods: {
getWorkPage() { getWorkPage() {
getAction(window._CONFIG['domianURL'] + this.url, {storeCode: this.$route.query.storeCode}).then(res => { // getAction(window._CONFIG['domianURL'] + this.url, {storeCode: this.$route.query.storeCode}).then(res => {
let arr = [] // let arr = []
res.data.forEach(element => { // res.data.forEach(element => {
var itemArr = [] // var itemArr = []
itemArr.push(element.areaName) // itemArr.push(element.areaName)
itemArr.push(element.type == 'OUT'? '出库': '入库') // itemArr.push(element.type == 'OUT'? '出库': '入库')
itemArr.push(element.positionName) // itemArr.push(element.positionName)
// itemArr.push(element.statusName) // // itemArr.push(element.statusName)
arr.push(itemArr) // 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 = { this.config = {
header: ["区域号", "作业类型", "垛位号"], header: ["库房名称", "物资名称", "数量", "状态"],
data: arr, data: arr,
rowNum: 5, //表格行数 rowNum: 6, //表格行数
headerHeight: 35, headerHeight: 35,
headerBGC: "#0C2869", //表头 headerBGC: "#0C2869", //表头
oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行 oddRowBGC: "rgb(15,47,130, 0.5)", //奇数行
evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行 evenRowBGC: "rgb(5,19,104, 0.5)", //偶数行
index: false, index: false,
columnWidth: [100,100,150], columnWidth: [150, 150, 100, 150],
align: ["center"] align: ["center"]
} }
}) // })
} }
} }
}; };
......
src/views/centerRight2.vue
...@@ -5,10 +5,11 @@ ...@@ -5,10 +5,11 @@
<span style="color:#5cd9e8"> <span style="color:#5cd9e8">
<icon name="align-left"></icon> <icon name="align-left"></icon>
</span> </span>
<span class="fs-xl text mx-2 headerTitle">库内物资排行</span> <span class="fs-xl text mx-2 headerTitle">库内物资Top10排行</span>
</div> </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> </div>
<dv-decoration-2 style="height:10px;" />
</div> </div>
</template> </template>
...@@ -29,21 +30,55 @@ export default { ...@@ -29,21 +30,55 @@ 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, {storeCode: this.$route.query.storeCode}).then(res => {
let data = [] // let data = []
res.data.forEach(item => { // res.data.forEach(item => {
const obj = { // const obj = {
name: item.goodsName, // name: item.goodsName,
value: item.amount // value: item.amount
} // }
data.push(obj) // 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,
unit: '件', unit: '件',
showValue: true showValue: true
} }
}) //})
} }
} }
}; };
......
src/views/index.vue
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div class="d-flex jc-center"> <div class="d-flex jc-center">
<dv-decoration-8 :color="['#568aea', '#131E88']" style="width:2.5rem;height:.425rem;" /> <dv-decoration-8 :color="['#568aea', '#131E88']" style="width:2.5rem;height:.425rem;" />
<div class="title"> <div class="title">
<span class="title-text">平面库监控平台</span> <span class="title-text">库内作业监控平台</span>
</div> </div>
<dv-decoration-8 <dv-decoration-8
:reverse="true" :reverse="true"
...@@ -18,47 +18,61 @@ ...@@ -18,47 +18,61 @@
</div> </div>
<dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" :color="['#568aea', '#131E88']"/> <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" :color="['#568aea', '#131E88']"/>
</div> </div>
<div class="d-flex jc-center"> <div class="main-header">
<dv-decoration-5 style="width: 500px;height: 30px;margin-bottom: 5px;" :color="['#568aea', '#131E88']"/> <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> </div>
<dv-border-box-1 class="main-container"> <dv-border-box-1 class="main-container">
<dv-border-box-10 class="left-chart-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;"> <div style="font-size: 0.35rem;width: 5.1rem;height: 1.225rem;line-height: 0.625rem; text-align: center; display: flex;">
<span class="react-before"></span> <span style="display: block;width: 2.55rem">今日入库<br>{{ 200 }}</span>
<span class="text" style="display: block;">{{dateYear}}</span> <span style="display: block;width: 2.55rem">今日出库<br> {{ 898 }}</span>
<span class="text" style="display: block;">{{dateDay}}</span>
</div> </div>
<dv-decoration-2 style="height:10px;" /> <dv-decoration-2 style="height:10px;" />
<centerLeft1 /> <centerLeft1 />
<bottomLeft /> <bottomLeft />
</dv-border-box-10> </dv-border-box-10>
<div class="right-main-container"> <div class="center-chart-container">
<div class="rmc-top-container"> <div class="rmc-top-container">
<dv-border-box-11 title="库内物资"> <dv-border-box-3>
<center/>
</dv-border-box-11> <center-cmp class="rmc-center-container"/>
<dv-border-box-11 title="库内温湿度">
<centerLeft2/> </dv-border-box-3>
</dv-border-box-11>
<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> </div>
<dv-border-box-10 class="rmc-bottom-container"> </div>
<Bottom-Charts />
<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> </dv-border-box-10>
</div> </div>
</dv-border-box-1> </dv-border-box-1>
<totalQuery ref="query"/>
</div> </div>
</dv-full-screen-container> </dv-full-screen-container>
</div> </div>
...@@ -71,10 +85,12 @@ import centerLeft2 from "./centerLeft2"; ...@@ -71,10 +85,12 @@ import centerLeft2 from "./centerLeft2";
import centerRight1 from "./centerRight1"; import centerRight1 from "./centerRight1";
import centerRight2 from "./centerRight2"; import centerRight2 from "./centerRight2";
import center from "./center"; import center from "./center";
import centerCmp from './CenterCmp'
import bottomLeft from "./bottomLeft"; import bottomLeft from "./bottomLeft";
import bottomRight from "./bottomRight"; 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"
export default { export default {
data () { data () {
return { return {
...@@ -94,7 +110,9 @@ export default { ...@@ -94,7 +110,9 @@ export default {
bottomLeft, bottomLeft,
bottomRight, bottomRight,
BottomCharts, BottomCharts,
centerChartBar centerChartBar,
totalQuery,
centerCmp
}, },
mounted () { mounted () {
this.timeFn(); this.timeFn();
...@@ -112,6 +130,9 @@ export default { ...@@ -112,6 +130,9 @@ export default {
setTimeout(() => { setTimeout(() => {
this.loading = false; this.loading = false;
}, 500); }, 500);
},
queryGoodsData() {
this.$refs.query.visible = true
} }
} }
}; };
...@@ -132,9 +153,19 @@ export default { ...@@ -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 { .left-chart-container {
width: 24%; width: 24%;
// padding: 10px;
box-sizing: border-box; box-sizing: border-box;
.border-box-content { .border-box-content {
...@@ -142,17 +173,20 @@ export default { ...@@ -142,17 +173,20 @@ export default {
} }
} }
.right-main-container { .center-chart-container {
width: 76%; width: 52%;
padding-left: 5px; padding-left: 5px;
box-sizing: border-box; box-sizing: border-box;
} }
.rmc-top-container { .right-chart-container {
height: 68%; width: 24%;
display: flex; padding-left: 5px;
box-sizing: border-box;
} }
.rmctc-left-container { .rmctc-left-container {
width: 65%; width: 65%;
} }
...@@ -162,6 +196,14 @@ export default { ...@@ -162,6 +196,14 @@ export default {
height: 99%; height: 99%;
} }
.rmc-top-container {
display: flex;
flex-direction: column;
height: 100%;
}
.rmc-center-container {
height: 70%;
}
.rmc-bottom-container { .rmc-bottom-container {
height: 30%; height: 30%;
} }
......
src/views/modal/TotalQuery.vue 0 → 100644
<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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论