湖里大屏：项目概览智能设备管理质量管理更改

src/views/projectAdmin/jlw/CIM/index.vue

@@ -96,19 +96,6 @@ export default {
 .container {
   width: 100%;
   height: 100%;
-<<<<<<< HEAD
-  display: flex;
-  justify-content: space-between;
-  .charts {
-    width: 23%;
-    height: calc(100% - 8px);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    .chart {
-      height: 32%;
-    }
-=======
   background-color: #07162b;
   background-image: url('~@/assets/images/projectImg/Bimbgc.png');
 }
@@ -127,7 +114,6 @@ export default {
   .leftCenter {
     height: 33%;
     margin-bottom: 15px;
->>>>>>> dev-xiaole
   }
   .bim {
     padding: 8px;

src/views/projectAdmin/jlw/projectHuli/ambientWeather.vue

@@ -15,7 +15,7 @@
       </div>
     </div>
     <div style="margin: 10px 0px 25px 0px">
-      <span style="color: #fff; margin-left: 130px; font-size: 14px"
+      <span style="color: #fff; margin-left: 150px; font-size: 14px"
         ><i class="el-icon-cloudy-and-sunny"></i> 多云 32℃</span
       >
       <span style="color: #229d65; font-size: 14px; display: inline"
@@ -118,7 +118,7 @@ export default {
   font-size: 12px;
 
   .tip {
-    color: #fff;
+    color: #6fe6f2;
     margin-left: 5px;
   }
 

src/views/projectAdmin/jlw/projectHuli/intelligentManage.vue

@@ -2,13 +2,13 @@
 <!-- 智能设备管理 -->
   <div class="intelligentManage">
     <div class="titleTxt">{{ title }}</div>
-    <div class="myChart" ref="myChart" />
+    <div class="img">
-
+      <img src="../../../../assets/images/projectImg/intell.png" alt="" />
+    </div>
   </div>
 </template>
 
 <script>
-import echarts from "echarts4";
 export default {
   props: {
     title: {
@@ -21,58 +21,6 @@ export default {
 
     };
   },
-  mounted(){
-    this.initMyChart();
-  },
-  methods:{
-    initMyChart(){
-      const myChart = echarts.init(this.$refs.myChart);
-      const option = {
-        tooltip: { trigger: 'item' },
-        grid: {
-          left: '42px',
-          right: '0',
-          bottom: '40px',
-          top: '45px'
-        },
-        xAxis: {
-          type: 'category',
-          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
-          axisLabel: {
-            //y轴文字的配置
-            textStyle: {
-              color: '#92a1bc',
-              margin: 15
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          fontSize: 14,
-          axisLabel: {
-            // y轴文字的配置
-            textStyle: {
-              color: '#92a1bc',
-              margin: 10
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed',
-              color: '#48618f'
-            }
-          }
-        },
-        color: ['#33b9f2', '#ed9745'],
-        series: [
-          { type: 'bar', barWidth: '18px', data: [80, 182, 201, 125, 150, 180, 130]}, 
-          { type: 'bar', barWidth: '18px', data: [120, 132, 151, 163, 180, 120, 140]}
-        ]
-      }
-        myChart.setOption(option)
-      }
-    }  
 }
 </script>
 
@@ -88,9 +36,11 @@ export default {
     margin-top: 5px;
     margin-left: 5px;
   }
-.myChart {
+  img{
-    width: 95%;
+    margin-left: 30px;
-    height: 90%;
+    margin-top: 10px;
+    width: 370px;
+    height: 220px;
   }
 }
 </style>

src/views/projectAdmin/jlw/projectHuli/projectIntro.vue

@@ -145,6 +145,7 @@ components:{Card},
     z-index: 2;
     .listItem {
       margin-bottom:2px ;
+      height: 8%;
       .value {
         color: #bec2c6;
       }

src/views/projectAdmin/jlw/projectHuli/qualityProblem.vue

@@ -1,15 +1,34 @@
 <template>
 <!-- 质量问题 -->
   <Card :title="title">
-    <JNestedRingChart :title="{ y:'30%' , subTitle: '隐患类别' }" :series="series" />
+    <div class="content">
+      <div class="chart">
+      <JRingChart
+          :title="{ text: total.totalNum, subTitle: '质量问题数' }"
+          :color="['#3cabfd', '#ff6c7f']"
+          :data="[{ value: total.jyUrgentLevelNum }, { value: total.ybUrgentLevelNum }]"
+          :radius="['55%', '80%']"
+        />
+    </div>
+        <div class="count">
+        <div class="count-item">
+          <div class="label">已整改质量问题</div>
+          <div class="num">{{25}}</div>
+        </div>
+        <div class="count-item">
+          <div class="label">未整改质量问题</div>
+          <div class="num">{{10}}</div>
+        </div>
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
-import JNestedRingChart from '../jChart/pie/JNestedRingChart.vue'
+import JRingChart from '../jChart/pie/JRingChart.vue'
 export default {
-  components: { Card, JNestedRingChart },
+  components: { Card, JRingChart },
   props: {
     title: {
       type: String,
@@ -18,27 +37,59 @@ export default {
   },
   data() {
     return {
-      series: [
+      total:{
-        {
+        totalNum:43,
-          color: ['#3cabfd', '#58ec72', '#f43a8d', '#f294c6', '#6ee4f0',],
+        jyUrgentLevelNum:25,
-          data: [
+        ybUrgentLevelNum:10,
-            { value: 45, name: '文明施工' },
+      }
-            { value: 5, name: '未分类' },
-            { value: 15, name: '安全管理' },
-            { value: 10, name: '施工安全' },
-            { value: 45, name: '基础工程' },
-          ]
-        },
-        {
-          roseType: 'area',
-          radius: ['58%', '54%'],
-          color: ['#0B1B35', '#244D8F'],
-          data: [30, 40, 30, 40]
-        }
-      ]
     }
   }
 }
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+ .content {
+    height: calc(100% - 30px);
+    display: flex;
+    .chart {
+      width: 55%;
+      height: 100%;
+    }
+    .count {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .count-item {
+        position: relative;
+        &::before {
+          position: absolute;
+          left: -16px;
+          top: 10px;
+          content: '';
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+        }
+        &:first-child {
+          margin-bottom: 20px;
+        }
+        &:first-child::before {
+          background-color: #3cabfd;
+        }
+        &:last-child::before {
+          background-color: #ff768b;
+        }
+        .label {
+          margin-bottom: 8px;
+          font-size: 14px;
+          color: rgba(255, 255, 255, 0.7);
+        }
+        .num {
+          font-size: 18px;
+        }
+      }
+    }
+  }
+</style>