中建四局大屏(资源管理):页面更改

src/views/projectAdmin/fourEngin/sourse/components/CarTable.vue

@@ -1,25 +1,46 @@
 <template>
   <div class="table">
     <div class="thead">
-      <div class="row">
+      <div class="row" v-if="type == 1">
-        <div>抓拍照片</div>
+        <div>材料种类</div>
-        <div>车辆信息</div>
+        <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
-          <div><img :src= item.src /></div>
+          class="row"
-          <div v-if="type==1" class="carNum">{{item.car}}</div>
+          v-if="type == 1"
-          <div v-if="type==2" class="carNum">{{item.carType}}</div>
+          v-for="(item, index) in infoList"
-          <div class="datetime">{{item.time}}</div>
+          :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>{{ item.types }}</div>
+          <div>
+            {{ item.value }}<a>{{ "(" + item.unit + ")" }}</a>
+          <div>{{ item.operation }}</div>
+          <div>{{ item.position }}</div>
+          <div>{{ item.time }}</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>
       </vue-scroll>
     </div>
@@ -31,37 +52,39 @@ export default {
   props: {
     type: {
       type: String,
-      default:''
+      default: "",
-    }
+    },
   },
   data() {
     return {
       infoList: [
-        { src:require("../../assets/images/common/bg_redCar.png"),car: "粤A455632",carType:"垃圾车", time: "2022-06-15 15:30" },
+        { types: "砌砖", position: "一号仓库", value: "1000", unit: "块" },
-        { src:require("../../assets/images/common/bg_gayCar.png"),car: "赣B254562",carType:"渣土车", time: "2022-08-03 12:30" },
+        { types: "钢筋", position: "一号仓库", value: "500", unit: "根" },
-        { src:require("../../assets/images/common/bg_BluCar.png"),car: "鄂C254522",carType:"垃圾车", time: "2022-04-15 10:17" },
+        { types: "砂浆", position: "一号仓库", value: "5", unit: "吨" },
-        { src:require("../../assets/images/common/bg_redCar.png"),car: "闽A542565",carType:"渣土车", time: "2022-06-03 15:30" },
+        { types: "水泥", position: "一号仓库", value: "5", unit: "吨" },
-        { src:require("../../assets/images/common/bg_redCar.png"),car: "闽A542565",carType:"渣土车", time: "2022-06-03 15:30" },
+        { 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" },
+        { types: "砌砖", value: "1000", unit: "块", position: "一号仓库", time: "10-15 12:30" ,operation:"出库"},
-        { src:require("../../assets/images/common/bg_gayCar.png"),car: "赣B254562",carType:"渣土车", time: "2022-08-03 12:30" },
+        { types: "钢筋", value: "500", unit: "根", position: "一号仓库", time: "10-15 12:30" ,operation:"出库"},
-        { src:require("../../assets/images/common/bg_BluCar.png"),car: "鄂C254522",carType:"垃圾车", time: "2022-04-15 10:17" },
+        { types: "砂浆", value: "5", unit: "吨",position: "一号仓库", time: "10-15 12:17" ,operation:"出库"},
-        { src:require("../../assets/images/common/bg_redCar.png"),car: "闽A542565",carType:"渣土车", time: "2022-06-03 15:30" },
+        { 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;
     }

src/views/projectAdmin/fourEngin/sourse/components/MaterialTable.vue

@@ -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: "35", time: "2022-06-15 15:30", brach:"20220314"},
-        { name: "钢筋", kg: "24", time: "2022-08-03 12:30" },
+        { name: "钢筋", kg: "24", time: "2022-08-03 12:30", brach:"20220314"},
-        { name: "玻璃", kg: "15", time: "2022-04-15 10:17" },
+        { name: "玻璃", kg: "15", time: "2022-04-15 10:17", brach:"20220314"},
-        { name: "水泥", kg: "23", time: "2022-06-03 15:30" },
+        { name: "水泥", kg: "23", time: "2022-06-03 15:30", brach:"20220314"},
-        { name: "钢筋", kg: "12", time: "2022-07-03 11:24" },
+        { name: "钢筋", kg: "12", time: "2022-07-03 11:24", brach:"20220314"},
-        { name: "玻璃", kg: "15", time: "2022-04-15 10:17" },
+      ],
-      ]
+      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;
+      padding-bottom: 12px;
-      // color: #59b2c0;
+      .row{
-      color: #838998;
+        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;
         }
       }
     }

src/views/projectAdmin/fourEngin/sourse/index.vue

@@ -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%;
     }
   }
 }

src/views/projectAdmin/fourEngin/sourse/leftBottom.vue

@@ -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 Card from "../components/Card.vue";
-import CarTable from './components/CarTable.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;
+  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>

src/views/projectAdmin/fourEngin/sourse/leftCenter.vue

@@ -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>

src/views/projectAdmin/fourEngin/sourse/leftTop.vue

@@ -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>辆
+      今日过磅<span>126</span>吨
-    </div>
-    <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 }
+  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;

src/views/projectAdmin/fourEngin/sourse/rightBottom.vue

@@ -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>

src/views/projectAdmin/fourEngin/sourse/rightTop.vue

@@ -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>
+        <div style="margin-left:20px; display:inline-block;">
-        <el-select size="mini" v-model="value2" placeholder="请选择">
+          <el-date-picker
-          <el-option
+            size="mini"
-            v-for="item in dataList"
+            v-model="time1"
-            :key="item.value"
+            type="daterange"
-            :label="item.label"
+            range-separator="-"
-            :value="item.value"
+            start-placeholder="开始日期"
-          ></el-option>
+            end-placeholder="结束日期"
-        </el-select>
+            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%;
+    margin-left: 68%;
-    color:#dfe6ea;
     height: 20px;
     line-height: 25px;
     span{
@@ -115,7 +123,7 @@ export default {
 }
 ::v-deep  .el-select,
 ::v-deep  .el-input,
-::v-deep  .el-input__inner{
+::v-deep  .frist .el-input__inner{
 background-color:#172337;
 background-image: url(../assets/images/common/num_bg.png);
 background-size: 100%;
@@ -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>

src/views/projectAdmin/fourEngin/style.less

@@ -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{