admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改资源管理

Browse Source
This commit is contained in:
yjl 2023-01-04 14:49:05 +08:00
parent 927e286f1b
commit 62d9e043a3
4 changed files with 513 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/views/projectAdmin/fourEngin/sourse/index.vue
View File

@ -43,26 +43,26 @@ export default {
// background: url(../assets/temp/3.png) no-repeat;
// background-size: 100% 100%;
.left {
width: 22%;
width: 32%;
height: 100%;
.top {
height: 22%;
height: 51%;
}
.center{
height: 38%;
height: 24%;
}
.bottom {
height: 40%;
height: 25%;
}
}
.right {
width: calc(78% - 40px);
width: calc(68% - 40px);
height: 100%;
.top {
height: 66.5%;
height: 75%;
}
.bottom {
height: 32.5%;
height: 25%;
}
}
}

164
src/views/projectAdmin/fourEngin/sourse/leftBottom.vue
View File

@ -1,40 +1,25 @@
<template>
<Card title="出入库记录">
<div class="list">
<div class="table">
<div class="thead">
<div class="row">
<div>材料种类</div>
<div>数量</div>
<div>操作</div>
<div>存放位置</div>
<div>时间</div>
</div>
</div>
<div class="tbody">
<vue-scroll style="height:280px">
<div class="row" v-for="(item, index) in carList" :key="index">
<div>{{ item.materialName }}</div>
<div class="datetime">
{{ item.netWeight }}<a>{{ "(吨)" }}</a>
</div>
<div>{{ item.poundType==1?'收料':item.poundType==2?'发料':item.poundType==3?'直入直出':'无' }}</div>
<div>{{ item.warehouseName }}</div>
<div>{{ item.weighingGrossTime }}</div>
</div>
</vue-scroll>
</div>
</div>
</div>
<Card title="监控录像">
<VideoModule class="playVideoBox"
:type="'project'"
:value="selectList"
:displayBottomMod="false"
:winNumBer="9"
:autoplay="false"
:showCaptrue="false"
:showControl="false"
:showPlayback="false"
:xxx="7"
></VideoModule>
</Card>
</template>
<script>
import Card from "../components/Card.vue";
import { getReceiptOrIssueRecord } from '@/assets/js/api/markingRoom'
import VideoModule from "@/components/videoModule/videoModule.vue";
export default {
components: { Card },
components: { Card,VideoModule },
data() {
return {
typeList:{
@ -44,64 +29,18 @@ export default {
},
sn:'',
carList:[],
// carList: [
// {
// types: "砌砖",
// value: "1000",
// unit: "块",
// position: "一号仓库",
// time: "10-15 12:30",
// operation: "出库",
// },
// {
// types: "钢筋",
// value: "500",
// unit: "根",
// position: "一号仓库",
// time: "10-15 12:30",
// operation: "入库",
// },
// {
// types: "砂浆",
// value: "5",
// unit: "吨",
// position: "一号仓库",
// time: "10-15 12:17",
// operation: "出库",
// },
// {
// types: "水泥",
// value: "5",
// unit: "吨",
// position: "一号仓库",
// time: "10-15 12:17",
// operation: "出库",
// },
// {
// types: "石子",
// value: "10",
// unit: "米吨",
// position: "一号仓库",
// time: "10-15 12:30",
// operation: "入库",
// },
// {
// types: "线缆",
// value: "5000",
// unit: "米",
// position: "一号仓库",
// time: "10-15 12:30",
// operation: "出库",
// },
// {
// types: "模板",
// value: "200",
// unit: "个",
// position: "一号仓库",
// time: "10-15 12:30",
// operation: "出库",
// },
// ],
selectList:[],
value1:'2',
typeList: [{
value: '1',
label: '2屏'
}, {
value: '2',
label: '4屏'
}, {
value: '3',
label: '9屏'
}],
};
},
mounted(){
@ -120,53 +59,8 @@ export default {
</script>
<style lang="less" scoped>
.list {
box-sizing: border-box;
padding-top: 30px;
.table {
width: 100%;
height: 100%;
color: rgb(255, 255, 255);
.thead {
padding-bottom: 12px;
color: #6ee4f0;
}
.tbody {
height: calc(100% - 30px);
}
.row {
display: flex;
align-items: center;
// justify-content: center;
font-size: 14px;
&:not(:last-child) {
// margin-bottom: 12px;
}
div {
box-sizing: border-box;
text-align: center;
padding-top: 12px;
&:first-child {
width: 70px;
}
&:not(:last-child) {
width: 84px;
margin-left: -6px
}
&:last-child {
flex: 1;
}
}
.datetime {
font-size: 18px;
color: #e7622a;
a {
color:#ffffff;
font-size: 10px;
}
}
}
}
.playVideoBox{
box-sizing: border-box;
padding-top: 20px;
}
</style>

266
src/views/projectAdmin/fourEngin/sourse/leftCenter.vue
View File

@ -1,23 +1,279 @@
<template>
<Card title="库存管理">
<Card title="偏差预警">
<div class="list">
<CarTable type="1" />
<div id="mainLeft"></div>
<div id="mainRight"></div>
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import CarTable from './components/CarTable.vue'
import * as echarts from 'echarts'
export default {
components: { Card, CarTable }
components: { Card, CarTable },
data() {
return {
list: [
{ name: '钢筋', number: '100' },
{ name: '加砌块', number: '50' },
{ name: '混凝土', number: '50' },
{ name: '钢构', number: '100' },
{ name: '砂浆', number: '20' },
{ name: '幕墙', number: '10' },
{ name: '水泥', number: '50' },
{ name: '瓷砖', number: '50' }
]
}
},
mounted() {
this.echartsItemLeft()
this.echartsItemRight()
},
methods: {
echartsItemLeft() {
var chartDom = document.getElementById('mainLeft')
var myChart = echarts.init(chartDom)
var data = [50,80,20,60]
var colorList = []
colorList[0] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgb(193, 174, 87)' },
{ offset: 1, color: 'rgb(222, 87, 51)' }
])
colorList[1] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgb(193, 174, 87)' },
{ offset: 1, color: 'rgb(222, 87, 51)' }
])
colorList[2] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgb(193, 174, 87)' },
{ offset: 1, color: 'rgb(222, 87, 51)' }
])
colorList[3] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgb(193, 174, 87)' },
{ offset: 1, color: 'rgb(222, 87, 51)' }
])
var option
option = {
// backgroundColor: '#100c29',
grid: {
top:'0',
left: '15%',
right: '15%',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
offset: 10,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
type: 'category',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
inside: true
},
data: ["钢筋","混凝土","砂浆","水泥"]
},
series: [
{
type: 'bar',
barWidth: '20px',
itemStyle: {
normal: {
color: function(params) {
console.log(params)
return colorList[params.dataIndex]
}
}
},
z: 9999,
data: data
},
{
type: 'bar',
barWidth: '20px',
barGap: '-100%',
z: 99,
itemStyle: {
normal: {
color: '#30373f'
}
},
data: [100,100,100,100]
},
{
// 分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: 'rgb(43, 82, 141)'
}
},
symbolRepeat: 'fixed',
symbolMargin: 2,
symbol: 'rect',
symbolClip: true,
symbolSize: [4, 20],
symbolPosition: 'start',
symbolOffset: [-4, 0],
data: [100,100,100,100],
width: 25,
z: 0,
zlevel: 1
}
]
}
option && myChart.setOption(option)
},
echartsItemRight() {
var chartDom = document.getElementById('mainRight')
var myChart = echarts.init(chartDom)
var data = [50,80,20,60]
var colorList = []
colorList[0] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgb(193, 174, 87)' },
{ offset: 1, color: 'rgb(222, 87, 51)' }
])
colorList[1] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgb(193, 174, 87)' },
{ offset: 1, color: 'rgb(222, 87, 51)' }
])
colorList[2] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgb(193, 174, 87)' },
{ offset: 1, color: 'rgb(222, 87, 51)' }
])
colorList[3] = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: 'rgb(193, 174, 87)' },
{ offset: 1, color: 'rgb(222, 87, 51)' }
])
var option
option = {
// backgroundColor: '#100c29',
grid: {
top:'0',
left: '15%',
right: '15%',
bottom: '0',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
offset: 10,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
type: 'category',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
inside: true
},
data: ["加砌块","钢构","幕墙","瓷砖"]
},
series: [
{
type: 'bar',
barWidth: '20px',
itemStyle: {
normal: {
color: function(params) {
console.log(params)
return colorList[params.dataIndex]
}
}
},
z: 9999,
data: data
},
{
type: 'bar',
barWidth: '20px',
barGap: '-100%',
z: 99,
itemStyle: {
normal: {
color: '#30373f'
}
},
data: [100,100,100,100]
},
{
// 分隔
type: 'pictorialBar',
itemStyle: {
normal: {
color: 'rgb(43, 82, 141)'
}
},
symbolRepeat: 'fixed',
symbolMargin: 2,
symbol: 'rect',
symbolClip: true,
symbolSize: [4, 20],
symbolPosition: 'start',
symbolOffset: [-4, 0],
data: [100,100,100,100],
width: 25,
z: 0,
zlevel: 1
}
]
}
option && myChart.setOption(option)
}
}
}
</script>
<style lang="less" scoped>
.list {
display: flex;
box-sizing: border-box;
padding-top: 30px;
height: 100%;
}
</style>
#mainLeft{
width: 50%;
height: 100%;
}
#mainRight{
width: 50%;
height: 100%;
}
</style>

221
src/views/projectAdmin/fourEngin/sourse/leftTop.vue
View File

@ -1,10 +1,29 @@
<template>
<Card title="实时过磅">
<div class="car-count">
计划进场量<span>{{messageList.plan||0}}</span>吨
<Card title="材料统计">
<div class="contentBox">
<div class="person">
<div>材料类别</div>
<div>下拉框一</div>
<div>下拉框二</div>
</div>
<div class="carbonEmission">
<div class="photovoltaicOne">
<div class="textKwh">800t</div>
<div class="textBottom">计划用量</div>
</div>
<div class="photovoltaicTwo">
<div class="textKwh">1200t</div>
<div class="textBottom">进场量</div>
</div>
<div class="photovoltaicThree">
<div class="textKwh">1100t</div>
<div class="textBottom">消耗量</div>
</div>
<div class="photovoltaicFour">
<div class="textKwh">100t</div>
<div class="textBottom">库存量</div>
</div>
</div>
<div class="car-count" style="margin-left:30px">
过磅量<span style="margin-left:45px">{{messageList.actual||0}}</span>吨
</div>
</Card>
</template>
@ -62,4 +81,196 @@ export default {
padding-top: 30px;
height: calc(100% - 120px);
}
.contentBox {
width: 100%;
height: 100%;
margin-top: 2%;
margin-left: 10px;
color: #fff;
.person {
display: flex;
justify-content: end;
div:nth-child(2),div:nth-child(3) {
margin: 5px 5px 10px 0px;
display: inline-block;
width: 88px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
background-image: url(../assets/images/common/num_bg.png);
background-repeat: no-repeat;
background-size: 100%;
color: #6ee4f0;
}
div:nth-child(1){
margin: 5px 5px 10px 0px;
display: inline-block;
width: 88px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 16px;
}
}
.contentTop {
display: flex;
justify-content: center;
align-items: center;
.img,
.contentBtn {
margin-right: 20px;
font-size: 14px;
.num1 {
color: #53a9b1;
font-size: 22px;
}
.num2 {
color: #f56c35;
font-size: 22px;
}
.text {
margin-top: 5px;
color: #fff;
font-size: 16px;
}
}
.img {
img {
height: 56px;
width: 56px;
}
}
}
.rowInfo {
color: #fff;
margin-top: 3%;
position: relative;
span {
font-size: 16px;
margin-left: 10px;
display: inline-block;
height: 25px;
line-height: 30px;
}
.leftlogo::after{
position: absolute;
content: url(../assets/images/common/icon_jt.png);
top: 10%;
width: 20px;
height: 20px;
left: 44%;
}
.leftnum{
display: inline-block;
margin-left: 40px;
}
}
.mintit{
box-sizing: border-box;
padding: 5px;
padding-left: 20px;
margin-top: 5px;
position: relative;
span{
margin-left: 20px;
}
.blueline::after{
position: absolute;
content: '';
width: 30px;
height: 2px;
border-radius: 10%;
background-color: #5CE2F6;
top: 88%;
left: 13%;
}
}
.echarts {
width: 100%;
height: 55%;
display: flex;
.checkChart {
width: 78%;
height: 100%;
}
.right {
margin-top: 45px;
font-size: 12px;
.point {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background-color: #fb6a2e;
margin-right: 15px;
}
.point2{
background-color: #65d3d8;
}
.num{
color: #fff;
margin: 5px 0px 30px 25px;
}
}
}
}
.carbonEmission {
// width: 100%;
// height: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 25px;
align-items: center;
justify-content: center;
.photovoltaicOne {
width: 180px;
height: 130px;
background-image: url("../assets/images/carbon/kwh1.png");
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
}
.photovoltaicTwo {
width: 180px;
height: 130px;
background-image: url("../assets/images/carbon/kwh2.png");
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 100px;
text-align: center;
}
.photovoltaicThree {
margin-top: 40px;
width: 180px;
height: 130px;
background-image: url("../assets/images/carbon/kwh4.png");
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
}
.photovoltaicFour {
margin-top: 40px;
width: 180px;
height: 130px;
background-image: url("../assets/images/carbon/kwh3.png");
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 100px;
text-align: center;
}
.textKwh{
font-size: 26px;
font-weight: bold;
margin: 29px 0 0 0;
}
.textBottom{
font-size: 17px;
margin: 79px 0 0 0;
}
}
</style>