中建四局(资源管理):样式整体调整数据更换

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

@@ -9,10 +9,11 @@
     </div>
     <div class="tbody">
       <vue-scroll>
-        <div class="row" v-for="i in 9" :key="i">
-          <div><img src="../../assets/images/common/bg_car.png" /></div>
-          <div class="carNum">粤A455632</div>
-          <div class="datetime">2011-02-03 15:30</div>
+        <div class="row" 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>
       </vue-scroll>
     </div>
@@ -20,13 +21,34 @@
 </template>
 
 <script>
-export default {}
+export 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_gayCar.png"),car: "赣B254562",carType:"垃圾车", time: "2022-07-03 11:24" },
+        { src:require("../../assets/images/common/bg_redCar.png"),car: "闽A542565",carType:"渣土车", time: "2022-02-15 15:30" },
+        { src:require("../../assets/images/common/bg_BluCar.png"),car: "粤B888888",carType:"垃圾车", time: "2022-06-03 15:30" },
+      ]
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped>
 .table {
   width: 100%;
   height: 100%;
+  color:#838998;
   .thead {
     padding-bottom: 12px;
     color: #59b2c0;

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

@@ -1,6 +1,6 @@
 <template>
   <div class="material-table">
-    <div class="title">物料进场</div>
+    <div class="title">{{title}}</div>
     <div class="table">
       <div class="thead">
         <div class="row">
@@ -11,10 +11,10 @@
       </div>
       <div class="tbody">
         <vue-scroll>
-          <div class="row" v-for="i in 9" :key="i">
-            <div>水泥</div>
-            <div>35</div>
-            <div>2011-02-03 15:30</div>
+          <div class="row" v-for="(item,index) in infoList" :key="index">
+            <div>{{item.name}}</div>
+            <div>{{item.kg}}</div>
+            <div>{{item.time}}</div>
           </div>
         </vue-scroll>
       </div>
@@ -23,26 +23,47 @@
 </template>
 
 <script>
-export default {};
+export default {
+  props:{
+    title:{
+      type:String,
+    }
+  },
+  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: "18", time: "2022-02-15 15:30" },
+        { name: "水泥", kg: "19", time: "2022-06-03 15:30" },
+      ]
+    };
+  }
+};
 </script>
 
 <style lang="less" scoped>
 .material-table {
   width: 100%;
   height: 100%;
+  color: #838998;
   .title {
-    height: 50px;
-    line-height: 40px;
+    height: 70px;
+    line-height: 70px;
     font-size: 20px;
     color: #6de3ef;
     text-align: center;
   }
   .table {
     width: 100%;
-    height: calc(100% - 50px);
+    height: calc(100% - 80px);
     .thead {
-      padding-bottom: 12px;
-      color: #59b2c0;
+      padding-bottom: 15px;
+      // color: #59b2c0;
+      color: #838998;
     }
     .tbody {
       height: calc(100% - 30px);
@@ -51,7 +72,7 @@ export default {};
       display: flex;
       align-items: center;
       &:not(:last-child) {
-        margin-bottom: 12px;
+        margin-bottom: 15px;
       }
       div {
         text-align: center;

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

@@ -1,7 +1,7 @@
 <template>
   <Card title="车辆冲洗抓拍">
     <div class="list">
-      <CarTable />
+      <CarTable type="2" />
     </div>
   </Card>
 </template>

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

@@ -7,7 +7,7 @@
       今日出场<span>126</span>辆
     </div>
     <div class="list">
-      <CarTable />
+      <CarTable type="1" />
     </div>
   </Card>
 </template>

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

@@ -1,43 +1,129 @@
 <template>
   <Card title="隐患趋势">
-    <JBarChart :tooltip="{}" :xData="xData" :series="series" />
+    <div class="typedata">
+      <div class="containbox">
+        <span>物料类型</span>
+        <el-select size="mini" v-model="value1" placeholder="请选择">
+          <el-option
+            v-for="item in typeList"
+            :key="item.value"
+            :label="item.label"
+            :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>
+      <div class="myChart">
+        <JBarChart :tooltip="{}" :grid="grid" :xData="xData" :series="series" />
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card.vue'
-import JBarChart from '../../common/jChart/bar/JBarChart.vue'
-import echarts from 'echarts4'
+import Card from "../components/Card.vue";
+import JBarChart from "../../common/jChart/bar/JBarChart.vue";
+import echarts from "echarts4";
 export default {
   components: { Card, JBarChart },
   data() {
     return {
-      xData: new Array(12).fill('破产倒闭').map((v, i) => i + 1 + '月'),
+      typeList: [{
+          value: '1',
+          label: '水泥'
+        }, {
+          value: '2',
+          label: '钢筋'
+        }, {
+          value: '3',
+          label: '玻璃'
+        }],
+        dataList:[{
+          value: '1',
+          label: '年'
+        }, {
+          value: '2',
+          label: '月'
+        }, {
+          value: '3',
+          label: '日'
+        }],
+      value1: '1',
+      value2: '1',
+      grid:  ['18%', '2%', '2%', '2%'],
+      xData: new Array(12).fill("破产倒闭").map((v, i) => i + 1 + "月"),
       series: [
         {
-          name: '计划用料',
-          data: [23, 44, 63, 12, 45, 78, 34, 67, 32, 44, 13, 75],
+          name: "计划用料",
+          data: [400, 420, 510, 600, 720, 820, 910, 820, 720, 510, 420, 400],
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: '#6de1ee' },
-              { offset: 1, color: '#6de1ee24' }
+              { offset: 0, color: "#6de1ee" },
+              { offset: 1, color: "#6de1ee24" }
             ])
           }
         },
         {
-          name: '实际用料',
-          data: [44, 13, 86, 24, 43, 78, 12, 32, 45, 82, 21, 76],
+          name: "实际用料",
+          data: [200, 300, 380, 420, 520, 620, 710, 620, 520, 420, 300, 200],
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: '#DE5F2A' },
-              { offset: 1, color: '#DE5F2A24' }
+              { offset: 0, color: "#DE5F2A" },
+              { offset: 1, color: "#DE5F2A24" }
             ])
           }
         }
       ]
+    };
   }
-  }
-}
+};
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.typedata {
+  width: 100%;
+  height: 100%;
+  .containbox {
+    margin-top: 1%;
+    margin-left: 65%;
+    color:#dfe6ea;
+    height: 20px;
+    line-height: 25px;
+    span{
+      margin-left: 15px;
+      margin-right: 5px;
+      font-size: 14px;
+    }
+  }
+  .myChart {
+    width: 100%;
+    height: 90%;
+  }
+}
+::v-deep .el-input--mini .el-input__inner {
+    height: 33px;
+    width: 80px;
+    color:#6ba8b1;
+}
+::v-deep  .el-select,
+::v-deep  .el-input,
+::v-deep  .el-input__inner{
+background-color:#172337 ;
+background-image: url(../assets/images/common/num_bg.png);
+background-size: 100%;
+border:0px;
+border-radius:0px;
+text-align: center;
+}
+::v-deep .el-select .el-input .el-select__caret{
+  color:#6ba8b1;
+}
+</style>