修改资源管理

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

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

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

@@ -1,40 +1,25 @@
 <template>
-  <Card title="出入库记录">
+  <Card title="监控录像">
-    <div class="list">
+    <VideoModule  class="playVideoBox"
-      <div class="table">
+        :type="'project'"
-        <div class="thead">
+        :value="selectList"
-          <div class="row">
+        :displayBottomMod="false"
-            <div>材料种类</div>
+        :winNumBer="9"
-            <div>数量</div>
+        :autoplay="false"
-            <div>操作</div>
+        :showCaptrue="false"
-            <div>存放位置</div>
+        :showControl="false"
-            <div>时间</div>
+        :showPlayback="false"
-          </div>
+        :xxx="7"
-        </div>
+      ></VideoModule>
-        <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>
 </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: [
+      selectList:[],
-      //   {
+        value1:'2',
-      //     types: "砌砖",
+        typeList: [{
-      //     value: "1000",
+          value: '1',
-      //     unit: "块",
+          label: '2屏'
-      //     position: "一号仓库",
+        }, {
-      //     time: "10-15 12:30",
+          value: '2',
-      //     operation: "出库",
+          label: '4屏'
-      //   },
+        }, {
-      //   {
+          value: '3',
-      //     types: "钢筋",
+          label: '9屏'
-      //     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: "出库",
-      //   },
-      // ],
     };
   },
   mounted(){
@@ -120,53 +59,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.list {
+.playVideoBox{
-  box-sizing: border-box;
+    box-sizing: border-box;
-  padding-top: 30px;
+    padding-top: 20px;
-  .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;
-        }
-      }
-    }
-  }
 }
 </style>

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

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

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

@@ -1,10 +1,29 @@
 <template>
-  <Card title="实时过磅">
+  <Card title="材料统计">
-    <div class="car-count">
+    <div class="contentBox">
-      计划进场量<span>{{messageList.plan||0}}</span>吨
+      <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>