中建四局大屏(资源管理):页面更改
This commit is contained in:
骆乐
parent
82aa10f7bb
commit
5eb9e9c9cf
@ -1,25 +1,46 @@
|
||||
<template>
|
||||
<div class="table">
|
||||
<div class="thead">
|
||||
<div class="row">
|
||||
<div>抓拍照片</div>
|
||||
<div>车辆信息</div>
|
||||
<div>抓拍时间</div>
|
||||
<div class="row" v-if="type == 1">
|
||||
<div>材料种类</div>
|
||||
<div>堆放位置</div>
|
||||
<div>材料库存</div>
|
||||
</div>
|
||||
<div class="row" v-if="type == 2">
|
||||
<div>材料种类</div>
|
||||
<div>数量</div>
|
||||
<div>操作</div>
|
||||
<div>存放位置</div>
|
||||
<div>时间</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
<vue-scroll>
|
||||
<div class="row" v-if="type==1" v-for="(item,index) in infoList" :key="index">
|
||||
<div><img :src= item.src /></div>
|
||||
<div v-if="type==1" class="carNum">{{item.car}}</div>
|
||||
<div v-if="type==2" class="carNum">{{item.carType}}</div>
|
||||
<div class="datetime">{{item.time}}</div>
|
||||
<div
|
||||
class="row"
|
||||
v-if="type == 1"
|
||||
v-for="(item, index) in infoList"
|
||||
:key="index"
|
||||
>
|
||||
<div>{{ item.types }}</div>
|
||||
<div class="carNum">{{ item.position }}</div>
|
||||
<div class="datetime">
|
||||
{{ item.value }}<a>{{ "(" + item.unit + ")" }}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="type==2" v-for="(item,index) in carList" :key="index">
|
||||
<div><img :src= item.src /></div>
|
||||
<div v-if="type==1" class="carNum">{{item.car}}</div>
|
||||
<div v-if="type==2" class="carNum">{{item.carType}}</div>
|
||||
<div class="datetime">{{item.time}}</div>
|
||||
<div
|
||||
class="row"
|
||||
v-if="type == 2"
|
||||
v-for="(item, index) in carList"
|
||||
:key="index"
|
||||
>
|
||||
<div>{{ item.types }}</div>
|
||||
<div>
|
||||
{{ item.value }}<a>{{ "(" + item.unit + ")" }}</a>
|
||||
<div>{{ item.operation }}</div>
|
||||
<div>{{ item.position }}</div>
|
||||
<div>{{ item.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
@ -28,40 +49,42 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
type:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
infoList:[
|
||||
{ src:require("../../assets/images/common/bg_redCar.png"),car: "粤A455632",carType:"垃圾车", time: "2022-06-15 15:30" },
|
||||
{ src:require("../../assets/images/common/bg_gayCar.png"),car: "赣B254562",carType:"渣土车", time: "2022-08-03 12:30" },
|
||||
{ src:require("../../assets/images/common/bg_BluCar.png"),car: "鄂C254522",carType:"垃圾车", time: "2022-04-15 10:17" },
|
||||
{ src:require("../../assets/images/common/bg_redCar.png"),car: "闽A542565",carType:"渣土车", time: "2022-06-03 15:30" },
|
||||
{ src:require("../../assets/images/common/bg_redCar.png"),car: "闽A542565",carType:"渣土车", time: "2022-06-03 15:30" },
|
||||
data() {
|
||||
return {
|
||||
infoList: [
|
||||
{ types: "砌砖", position: "一号仓库", value: "1000", unit: "块" },
|
||||
{ types: "钢筋", position: "一号仓库", value: "500", unit: "根" },
|
||||
{ types: "砂浆", position: "一号仓库", value: "5", unit: "吨" },
|
||||
{ types: "水泥", position: "一号仓库", value: "5", unit: "吨" },
|
||||
{ types: "石子", position: "一号仓库", value: "5", unit: "吨" },
|
||||
{ types: "线缆", position: "一号仓库", value: "5000", unit: "米" },
|
||||
{ types: "模板", position: "一号仓库", value: "200", unit: "个" },
|
||||
],
|
||||
carList:[
|
||||
{ src:require("../../assets/images/common/bg_redCar.png"),car: "粤A455632",carType:"垃圾车", time: "2022-06-15 15:30" },
|
||||
{ src:require("../../assets/images/common/bg_gayCar.png"),car: "赣B254562",carType:"渣土车", time: "2022-08-03 12:30" },
|
||||
{ src:require("../../assets/images/common/bg_BluCar.png"),car: "鄂C254522",carType:"垃圾车", time: "2022-04-15 10:17" },
|
||||
{ src:require("../../assets/images/common/bg_redCar.png"),car: "闽A542565",carType:"渣土车", time: "2022-06-03 15:30" },
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
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: "5000", unit: "米",position: "一号仓库", time: "10-15 12:30" ,operation:"出库"},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color:#838998;
|
||||
color: rgb(255,255,255);
|
||||
.thead {
|
||||
padding-bottom: 12px;
|
||||
color: #59b2c0;
|
||||
color: #6EE4F0;
|
||||
}
|
||||
.tbody {
|
||||
height: calc(100% - 30px);
|
||||
@ -69,6 +92,15 @@ export default {
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
.datetime {
|
||||
font-size: 18px;
|
||||
color: #e7622a;
|
||||
a {
|
||||
color:#ffffff;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div class="material-table">
|
||||
<div class="title">{{title}}</div>
|
||||
<div class="table">
|
||||
<div class="table" v-if="title == '材料运单'">
|
||||
<div class="thead">
|
||||
<div class="row">
|
||||
<div>物料类型</div>
|
||||
<div>重量(KG)</div>
|
||||
<div>时间</div>
|
||||
<div>批次</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
@ -15,6 +16,49 @@
|
||||
<div>{{item.name}}</div>
|
||||
<div>{{item.kg}}</div>
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{item.brach}}</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table2" v-if="title == '材料订单'">
|
||||
<div class="thead">
|
||||
<div class="row">
|
||||
<div>物料类型</div>
|
||||
<div>数量</div>
|
||||
<div>时间</div>
|
||||
<div>单价</div>
|
||||
<div>总价</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
<vue-scroll>
|
||||
<div class="row" v-for="(item,index) in orderList" :key="index">
|
||||
<div>{{item.name}}</div>
|
||||
<div>{{item.num}}</div>
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{item.unitPrice}}</div>
|
||||
<div>{{item.allPrice}}</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table" v-if="title == '材料验收'">
|
||||
<div class="thead">
|
||||
<div class="row">
|
||||
<div>物料类型</div>
|
||||
<div>重量(KG)</div>
|
||||
<div>时间</div>
|
||||
<div>验收类型</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
<vue-scroll>
|
||||
<div class="row" v-for="(item,index) in checkList" :key="index">
|
||||
<div>{{item.name}}</div>
|
||||
<div>{{item.kg}}</div>
|
||||
<div>{{item.time}}</div>
|
||||
<div>{{item.kind}}</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
@ -32,13 +76,26 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
infoList: [
|
||||
{ name: "水泥", kg: "35", time: "2022-06-15 15:30" },
|
||||
{ name: "钢筋", kg: "24", time: "2022-08-03 12:30" },
|
||||
{ name: "玻璃", kg: "15", time: "2022-04-15 10:17" },
|
||||
{ name: "水泥", kg: "23", time: "2022-06-03 15:30" },
|
||||
{ name: "钢筋", kg: "12", time: "2022-07-03 11:24" },
|
||||
{ name: "玻璃", kg: "15", time: "2022-04-15 10:17" },
|
||||
]
|
||||
{ name: "水泥", kg: "35", time: "2022-06-15 15:30", brach:"20220314"},
|
||||
{ name: "钢筋", kg: "24", time: "2022-08-03 12:30", brach:"20220314"},
|
||||
{ name: "玻璃", kg: "15", time: "2022-04-15 10:17", brach:"20220314"},
|
||||
{ name: "水泥", kg: "23", time: "2022-06-03 15:30", brach:"20220314"},
|
||||
{ name: "钢筋", kg: "12", time: "2022-07-03 11:24", brach:"20220314"},
|
||||
],
|
||||
orderList: [
|
||||
{ name: "水泥", num: "35", time: "2022-06-15 15:30", unitPrice:"10",allPrice:"350"},
|
||||
{ name: "钢筋", num: "24", time: "2022-08-03 12:30", unitPrice:"20",allPrice:"480"},
|
||||
{ name: "玻璃", num: "15", time: "2022-04-15 10:17", unitPrice:"10",allPrice:"210"},
|
||||
{ name: "水泥", num: "23", time: "2022-06-03 15:30", unitPrice:"10",allPrice:"230"},
|
||||
{ name: "钢筋", num: "12", time: "2022-07-03 11:24", unitPrice:"20",allPrice:"240"},
|
||||
],
|
||||
checkList: [
|
||||
{ name: "水泥", kg: "35", time: "2022-06-15 15:30", kind:"合格"},
|
||||
{ name: "钢筋", kg: "24", time: "2022-08-03 12:30", kind:"合格"},
|
||||
{ name: "玻璃", kg: "15", time: "2022-04-15 10:17", kind:"不合格"},
|
||||
{ name: "水泥", kg: "23", time: "2022-06-03 15:30", kind:"合格"},
|
||||
{ name: "钢筋", kg: "12", time: "2022-07-03 11:24", kind:"不合格"},
|
||||
],
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -48,33 +105,37 @@ export default {
|
||||
.material-table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #838998;
|
||||
color: #ffffff;
|
||||
.title {
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
font-size: 20px;
|
||||
color: #6de3ef;
|
||||
color: #6EE4F0;
|
||||
text-align: center;
|
||||
}
|
||||
.table {
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
.thead {
|
||||
padding-bottom: 15px;
|
||||
// color: #59b2c0;
|
||||
color: #838998;
|
||||
padding-bottom: 12px;
|
||||
.row{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
height: calc(100% - 30px);
|
||||
// height: calc(100% - 30px);
|
||||
// overflow: auto;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
div {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
&:last-child {
|
||||
flex: 1;
|
||||
}
|
||||
@ -84,10 +145,49 @@ export default {
|
||||
&:not(:last-child) {
|
||||
width: 100px;
|
||||
}
|
||||
img {
|
||||
}
|
||||
}
|
||||
}
|
||||
.table2 {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
.thead {
|
||||
padding-bottom: 12px;
|
||||
.row{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.tbody {
|
||||
// height: calc(100% - 30px);
|
||||
// overflow: auto;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
div {
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
&:last-child {
|
||||
flex: 1;
|
||||
}
|
||||
&:first-child {
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
background: skyblue;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 80px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
flex: 1.5;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 40px;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,6 +4,9 @@
|
||||
<div class="top">
|
||||
<LeftTop />
|
||||
</div>
|
||||
<div class="center">
|
||||
<LeftCenter />
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<LeftBottom />
|
||||
</div>
|
||||
@ -21,11 +24,12 @@
|
||||
|
||||
<script>
|
||||
import LeftTop from './leftTop.vue'
|
||||
import LeftCenter from './leftCenter.vue'
|
||||
import LeftBottom from './leftBottom.vue'
|
||||
import RightTop from './rightTop.vue'
|
||||
import RightBottom from './rightBottom.vue'
|
||||
export default {
|
||||
components: { LeftTop, LeftBottom, RightTop, RightBottom }
|
||||
components: { LeftTop, LeftCenter,LeftBottom, RightTop, RightBottom }
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -42,7 +46,10 @@ export default {
|
||||
width: 22%;
|
||||
height: 100%;
|
||||
.top {
|
||||
height: 60%;
|
||||
height: 22%;
|
||||
}
|
||||
.center{
|
||||
height: 38%;
|
||||
}
|
||||
.bottom {
|
||||
height: 40%;
|
||||
@ -52,10 +59,10 @@ export default {
|
||||
width: calc(78% - 40px);
|
||||
height: 100%;
|
||||
.top {
|
||||
height: 60%;
|
||||
height: 66.5%;
|
||||
}
|
||||
.bottom {
|
||||
height: 40%;
|
||||
height: 32.5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,23 +1,150 @@
|
||||
<template>
|
||||
<Card title="车辆冲洗抓拍">
|
||||
<Card title="出入库记录">
|
||||
<div class="list">
|
||||
<CarTable type="2" />
|
||||
<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>
|
||||
<div class="row" v-for="(item, index) in carList" :key="index">
|
||||
<div>{{ item.types }}</div>
|
||||
<div class="datetime">
|
||||
{{ item.value }}<a>{{ "(" + item.unit + ")" }}</a>
|
||||
</div>
|
||||
<div>{{ item.operation }}</div>
|
||||
<div>{{ item.position }}</div>
|
||||
<div>{{ item.time }}</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import CarTable from './components/CarTable.vue'
|
||||
import Card from "../components/Card.vue";
|
||||
export default {
|
||||
components: { Card, CarTable }
|
||||
}
|
||||
components: { Card },
|
||||
data() {
|
||||
return {
|
||||
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: "出库",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.list {
|
||||
box-sizing: border-box;
|
||||
padding-top: 10px;
|
||||
height:100%;
|
||||
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;
|
||||
}
|
||||
&:last-child {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.datetime {
|
||||
font-size: 18px;
|
||||
color: #e7622a;
|
||||
a {
|
||||
color:#ffffff;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
23
src/views/projectAdmin/fourEngin/sourse/leftCenter.vue
Normal file
23
src/views/projectAdmin/fourEngin/sourse/leftCenter.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<Card title="库存管理">
|
||||
<div class="list">
|
||||
<CarTable type="1" />
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import CarTable from './components/CarTable.vue'
|
||||
export default {
|
||||
components: { Card, CarTable }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
.list {
|
||||
box-sizing: border-box;
|
||||
padding-top: 30px;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,22 +1,18 @@
|
||||
<template>
|
||||
<Card title="车辆管理">
|
||||
<Card title="实时过磅">
|
||||
<div class="car-count">
|
||||
今日入场<span>234</span>辆
|
||||
今日过磅<span>10</span>次
|
||||
</div>
|
||||
<div class="car-count">
|
||||
今日出场<span>126</span>辆
|
||||
</div>
|
||||
<div class="list">
|
||||
<CarTable type="1" />
|
||||
今日过磅<span>126</span>吨
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from '../components/Card.vue'
|
||||
import CarTable from './components/CarTable.vue'
|
||||
export default {
|
||||
components: { Card, CarTable }
|
||||
components: { Card }
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -25,7 +21,7 @@ export default {
|
||||
padding-top: 20px;
|
||||
padding-left: 30px;
|
||||
font-size: 18px;
|
||||
color: #59b2c0;
|
||||
color: rgba(110, 228, 240, 0.8500);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
span {
|
||||
@ -33,7 +29,7 @@ export default {
|
||||
margin-right: 20px;
|
||||
width: 140px;
|
||||
height: 50px;
|
||||
line-height: 60px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<Card title="检查统计">
|
||||
<Card title="物资管理">
|
||||
<div class="list-group">
|
||||
<div class="list"><MaterialTable title="物料进场" /></div>
|
||||
<div class="list"><MaterialTable title="物料出场" /></div>
|
||||
<div class="list"><MaterialTable title="材料检验" /></div>
|
||||
<div class="list"><MaterialTable title="材料订单" /></div>
|
||||
<div class="list"><MaterialTable title="材料运单" /></div>
|
||||
<div class="list"><MaterialTable title="材料验收" /></div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="typedata">
|
||||
<div class="containbox">
|
||||
<span>物料类型</span>
|
||||
<el-select size="mini" v-model="value1" placeholder="请选择">
|
||||
<el-select class="frist" size="mini" v-model="value1" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.value"
|
||||
@ -11,15 +11,18 @@
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<span>数据筛选</span>
|
||||
<el-select size="mini" v-model="value2" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in dataList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<div style="margin-left:20px; display:inline-block;">
|
||||
<el-date-picker
|
||||
size="mini"
|
||||
v-model="time1"
|
||||
type="daterange"
|
||||
range-separator="-"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="getTime1"
|
||||
></el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
<div class="myChart">
|
||||
<JBarChart :tooltip="{}" :grid="grid" :xData="xData" :series="series" />
|
||||
@ -36,6 +39,7 @@ export default {
|
||||
components: { Card, JBarChart },
|
||||
data() {
|
||||
return {
|
||||
time1:[],
|
||||
typeList: [{
|
||||
value: '1',
|
||||
label: '水泥'
|
||||
@ -83,6 +87,11 @@ export default {
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
getTime1(val) {
|
||||
this.time1 = val;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -93,8 +102,7 @@ export default {
|
||||
height: 100%;
|
||||
.containbox {
|
||||
margin-top: 1%;
|
||||
margin-left: 75%;
|
||||
color:#dfe6ea;
|
||||
margin-left: 68%;
|
||||
height: 20px;
|
||||
line-height: 25px;
|
||||
span{
|
||||
@ -115,8 +123,8 @@ export default {
|
||||
}
|
||||
::v-deep .el-select,
|
||||
::v-deep .el-input,
|
||||
::v-deep .el-input__inner{
|
||||
background-color:#172337 ;
|
||||
::v-deep .frist .el-input__inner{
|
||||
background-color:#172337;
|
||||
background-image: url(../assets/images/common/num_bg.png);
|
||||
background-size: 100%;
|
||||
border:0px;
|
||||
@ -126,4 +134,28 @@ text-align: center;
|
||||
::v-deep .el-select .el-input .el-select__caret{
|
||||
color:#6ba8b1;
|
||||
}
|
||||
::v-deep .el-date-editor--daterange.el-input__inner {
|
||||
width: 230px;
|
||||
height: 30px;
|
||||
background-color: #182337;
|
||||
border: 1px solid #264b5e;
|
||||
}
|
||||
::v-deep .el-range-input {
|
||||
background-color: #182337;
|
||||
color: #6ee4f0;
|
||||
}
|
||||
::v-deep .el-date-editor {
|
||||
.el-range__icon {
|
||||
line-height: 23px;
|
||||
color: #6ee4f0;
|
||||
}
|
||||
.el-range-separator {
|
||||
line-height: 23px;
|
||||
color: #757d88;
|
||||
}
|
||||
.el-range__close-icon {
|
||||
color: #757d88;
|
||||
line-height: 23px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
|
||||
.dataBoardPage{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color:#091529;
|
||||
position: relative;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: rgb(255, 255, 255);
|
||||
// color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.headerBox{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user