修改资源管理页面

src/components/videoModule/videoModule.less

@@ -1,6 +1,6 @@
 .videoOverview{
     position: relative;
-    background-color: #03112b;
+    // background-color: #03112b;
     height: 100%;
     .videoTop{
         position: absolute;

src/views/projectAdmin/common/jChart/bar/JBarChart.vue

@@ -29,6 +29,11 @@ export default {
       type: Array,
       default: () => []
     },
+    legend: {
+      required: true,
+      type: Array,
+      default: () => []
+    },
     yData: {
       type: Array,
       default: () => []
@@ -66,12 +71,12 @@ export default {
   },
   methods: {
     createChart() {
-      const { title, tooltip, grid, color, xData, yData, series } = this
+      const { title, tooltip, grid, color, xData, yData, series,legend } = this
       const configSeries = (series => {
-        console.log(series[0].data,'=========================yyyyyyyyyy')
+        // console.log(series[3].data,'=========================yyyyyyyyyy')
-        console.log(series[1].data,'=========================yyyyyyyyyy')
+        // console.log(series[1].data,'=========================yyyyyyyyyy')
         if (series.length) {
-          return series.map(item => ({ name: item.name, type: 'bar', data: item.data, barWidth: 20, itemStyle: item.itemStyle }))
+          return series.map(item => ({ name: item.name, type: item.type, data: item.data, barWidth: 20, itemStyle: item.itemStyle }))
         } else {
           return [{ data: yData, type: 'bar', barWidth: 15 }]
         }
@@ -93,7 +98,7 @@ export default {
           left: 20,
           itemWidth: 8,
           textStyle: { color: '#fff' },
-          data: [{ name: '计划用量' }, { name: '实际用量' }]
+          data: legend
         },
         tooltip,
         grid: {

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

@@ -14,16 +14,7 @@ export default {
   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() {
@@ -58,8 +49,8 @@ export default {
         // backgroundColor: '#100c29',
         grid: {
         top:'0',
-        left: '15%',
+        left: '10%',
-        right: '15%',
+        right: '10%',
         bottom: '0',
         containLabel: true
         },
@@ -80,17 +71,16 @@ export default {
           }
         },
         yAxis: {
-          type: 'category',
-          inverse: true,
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
           axisLabel: {
-            inside: true
+            show: true,
-          },
+            textStyle: {
+                color: '#FFFFFF',      //y轴字体颜色
+                fontSize:'15px'
+            },
+        },
+        splitLine: {show: false},   //横向的线
+        axisTick: {show: false},    //y轴的端点
+        axisLine: {show: false},    //y轴的线
           data: ["钢筋","混凝土","砂浆","水泥"]
         },
         series: [
@@ -106,7 +96,7 @@ export default {
               }
             },
             z: 9999,
-            data: data
+            data: data,
           },
           {
             type: 'bar',
@@ -118,7 +108,18 @@ export default {
                 color: '#30373f'
               }
             },
-            data: [100,100,100,100]
+            label: {
+              show: true,
+              offset: [30, 0],
+              position: 'right',
+              align: 'right',
+              formatter: function(data) {
+                for (let i = 0; i < data.length; i++) {
+                  return data[i] + '%'
+                }
+              }
+            },
+            data: data
           },
           {
             // 分隔
@@ -171,8 +172,8 @@ export default {
         // backgroundColor: '#100c29',
         grid: {
         top:'0',
-        left: '15%',
+        left: '10%',
-        right: '15%',
+        right: '10%',
         bottom: '0',
         containLabel: true
         },
@@ -193,17 +194,16 @@ export default {
           }
         },
         yAxis: {
-          type: 'category',
-          inverse: true,
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
           axisLabel: {
-            inside: true
+            show: true,
-          },
+            textStyle: {
+                color: '#FFFFFF',       //y轴字体颜色
+                fontSize:'15px'
+            },
+        },
+        splitLine: {show: false},   //横向的线
+        axisTick: {show: false},    //y轴的端点
+        axisLine: {show: false},    //y轴的线
           data: ["加砌块","钢构","幕墙","瓷砖"]
         },
         series: [
@@ -231,7 +231,18 @@ export default {
                 color: '#30373f'
               }
             },
-            data: [100,100,100,100]
+            label: {
+              show: true,
+              offset: [30, 0],
+              position: 'right',
+              align: 'right',
+              formatter: function(data) {
+                for (let i = 0; i < data.length; i++) {
+                  return data[i] + '%'
+                }
+              }
+            },
+            data: data
           },
           {
             // 分隔

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

@@ -2,9 +2,17 @@
   <Card title="材料统计">
     <div class="contentBox">
       <div class="person">
-        <div>材料类别</div>
+        <div class="typeName">材料类别</div>
-        <div>下拉框一</div>
+        <div>
-        <div>下拉框二</div>
+          <el-select v-model="typeValue" placeholder="请选择" style="background:transparent;width: 100px;">
+            <el-option v-for="item in typesList" :key="item" :label="item" :value="item"> </el-option>
+          </el-select>
+        </div>
+        <div style="margin-left: 20px;">
+          <el-select v-model="yearValue" placeholder="请选择" style="background:transparent;width: 100px;">
+            <el-option v-for="item in dateList" :key="item" :label="item" :value="item"> </el-option>
+          </el-select>
+        </div>
       </div>
       <div class="carbonEmission">
       <div class="photovoltaicOne">
@@ -36,7 +44,11 @@ export default {
   data(){
     return{
       messageList:[],
-      sn:''
+      sn:'',
+      typesList:["水泥","钢筋","玻璃"],
+      dateList:["2021","2022"],
+      typeValue:"钢筋",
+      yearValue:"2021"
     }
   },
   mounted(){
@@ -88,29 +100,17 @@ export default {
   margin-left: 10px;
   color: #fff;
   .person {
+    margin-top: 4%;
+    margin-left: 46%;
+    height: 20px;
+    line-height: 25px;
     display: flex;
-    justify-content: end;
+    .typeName{
-    div:nth-child(2),div:nth-child(3) {
+      width: 65px;
-      margin: 5px 5px 10px 0px;
-      display: inline-block;
-      width: 88px;
       height: 40px;
-      text-align: center;
+      font-weight: 500;
       line-height: 40px;
-      font-size: 16px;
+      margin: 0 20px 0 0;
-      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;
     }
   }
 
@@ -223,7 +223,7 @@ export default {
   // height: 100%;
   display: flex;
   flex-wrap: wrap;
-  margin-top: 25px;
+  margin-top: 50px;
   align-items: center;
   justify-content: center;
   .photovoltaicOne {
@@ -273,4 +273,10 @@ export default {
     margin: 79px 0 0 0;
   }
 }
+::v-deep .el-input--suffix .el-input__inner {
+    background: transparent !important;
+    color: #fff !important;
+    border: 1px solid #66D3D8 !important ;
+    z-index: 999;
+  }
 </style>

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

@@ -1,9 +1,12 @@
 <template>
-  <Card title="物资管理">
+  <Card title="主材累计消耗量">
-    <div class="list-group">
+    <div class="flexOutside">
-      <div class="list"><MaterialTable title="材料订单" /></div>
+      <div v-for="(item, index) in list" :key="index">
-      <div class="list"><MaterialTable title="材料运单" /></div>
+        <div :style="'background-image:url(' + item.url + ')'" class="item">
-      <!-- <div class="list"><MaterialTable title="采购合同" /></div> -->
+            <div>{{ item.name }}</div>
+            <div>{{ item.number }}</div>
+        </div>
+      </div>
     </div>
   </Card>
 </template>
@@ -14,16 +17,45 @@ import MaterialTable from './components/MaterialTable.vue'
 
 export default {
   components: { Card, MaterialTable },
+  data() {
+    return {
+      list: [
+        { name: '混凝土', number: '1000t', url: require('../assets/images/carbon/top1.png') },
+        { name: '钢筋', number: '500t', url: require('../assets/images/carbon/top2.png') },
+        { name: '水泥', number: '100t', url: require('../assets/images/carbon/top3.png') },
+        { name: '幕墙', number: '100㎡', url: require('../assets/images/carbon/top4.png') },
+        { name: '砂浆', number: '600t', url: require('../assets/images/carbon/bottom1.png') },
+        { name: '加砌块', number: '5000t', url: require('../assets/images/carbon/bottom2.png') },
+        { name: '瓷砖', number: '200㎡', url: require('../assets/images/carbon/bottom3.png') },
+        { name: '钢构', number: '200t', url: require('../assets/images/carbon/bottom4.png') }
+      ]
+    }
+  }
 }
 </script>
 
 <style lang="less" scoped>
-.list-group {
+.flexOutside {
-  height: 100%;
   display: flex;
-  justify-content: space-around;
+  flex-wrap: wrap;
-  .list {
+  justify-content: space-evenly;
-    width: 28%;
+}
+.item {
+  width: 280px;
+  height: 85px;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  text-align: center;
+  margin-top: 20px;
+  div:nth-child(1){
+    font-size: 14px;
+    color: rgb(91, 183, 222);
+    padding: 18px 64px 0 0;
+  }
+  div:nth-child(2){
+    font-size: 23px;
+    font-weight: bold;
+    margin: 3px 50px 0 0;
   }
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <Card title="主材计划与实际用量对比图">
+  <Card title="主材进场和消耗对比图">
     <div class="typedata">
       <div class="containbox">
         <!-- <span>物料类型</span>
@@ -11,14 +11,20 @@
             :value="item.value"
           ></el-option>
         </el-select> -->
+        <div class="typeName">材料类别</div>
         <div style="margin-left:20px;">
-          <el-select v-model="yearValue" placeholder="请选择" style="background:transparent">
+          <el-select v-model="typeValue" placeholder="请选择" style="background:transparent;width: 100px;">
+            <el-option v-for="item in typeList" :key="item" :label="item.label" :value="item"> </el-option>
+          </el-select>
+        </div>
+        <div style="margin-left:20px;">
+          <el-select v-model="yearValue" placeholder="请选择" style="background:transparent;width: 100px;">
             <el-option v-for="item in yearsList" :key="item" :label="item" :value="item"> </el-option>
           </el-select>
         </div>
       </div>
       <div class="myChart">
-        <JBarChart v-if="isblock" :grid="grid" :xData="xData" :series="series" :tooltip="tooltip" />
+        <JBarChart v-if="isblock" :grid="grid" :xData="xData" :legend="legend" :series="series" :tooltip="tooltip" />
       </div>
       <div class="dataImg" v-if="yearsList.length==0">
           <img src="@/assets/images/noData3.png" alt srcset />
@@ -40,6 +46,7 @@ export default {
   data() {
     return {
       time1: [],
+      typeValue:'水泥',
       typeList: [
         {
           value: '1',
@@ -68,6 +75,7 @@ export default {
           label: '日'
         }
       ],
+      legend:["计划用量","实际用量","偏差比例"],
       value1: '1',
       value2: '1',
       grid: ['18%', '2%', '2%', '2%'],
@@ -75,6 +83,7 @@ export default {
       series: [
         {
           name: '计划用量',
+          type:'bar',
           data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -85,6 +94,7 @@ export default {
         },
         {
           name: '实际用量',
+          type:'bar',
           data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -92,7 +102,44 @@ export default {
               { offset: 1, color: '#DE5F2A24' }
             ])
           }
-        }
+        },
+        {
+            name: "偏差比例",
+            type: "line",
+            symbolSize: 10,
+            symbol: "circle",
+            smooth: true,
+            itemStyle: {
+              normal: {
+                color: "rgb(206, 190, 69)",
+                barBorderRadius: 0,
+              },
+            },
+            lineStyle: {
+              normal: {
+                width: 4,
+                color: {
+                  type: "linear",
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "rgba(255, 195, 3, 1)", // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(255, 195, 3, 1)", // 100% 处的颜色
+                    },
+                  ],
+                  global: false, // 缺省为 false
+                },
+              },
+            },
+            data:  [10, 0, 20, 0, 0, 0, 0, 40, 0, 50, 0, 0],
+          },
       ],
       tooltip: {
         trigger: 'axis',
@@ -155,15 +202,21 @@ export default {
 
   .containbox {
     margin-top: 2%;
-    margin-left: 80%;
+    margin-left: 75%;
     height: 20px;
     line-height: 25px;
-
+    display: flex;
     span {
       margin-left: 15px;
       margin-right: 5px;
       font-size: 14px;
     }
+    .typeName{
+      width: 65px;
+      height: 40px;
+      font-weight: 500;
+      line-height: 40px;
+    }
   }
   .dataImg{
     width: 200px;