中建四局(大屏):样式调整

src/views/projectAdmin/common/jChart/pie/JRingChart.vue

@@ -3,73 +3,77 @@
 </template>
 
 <script>
-import echarts from 'echarts4'
+import echarts from "echarts4";
 export default {
   props: {
     data: {
       type: Array,
-      default: () => [{ value: 1, name: '' }]
+      default: () => [{ value: 1, name: "" }]
     },
     color: {
       type: Array,
-      default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
+      default: () => ["#5181F6", "#61D2B9", "#F67F51", "#7851F6"]
     },
     title: {
       type: Object,
       default: () => ({
-        text: '',
+        text: "",
-        subTitle: '',
+        subTitle: "",
-        x: '48%',
+        x: "48%",
-        y: '36%',
+        y: "36%",
         fontSize: 20
       })
     },
     radius: {
       type: Array,
-      default: () => ['65%', '80%']
+      default: () => ["65%", "80%"]
+    },
+    legend:{
+      type:Boolean,
+      default: () => true
     }
   },
   mounted() {
-    this.createRingChart()
+    this.createRingChart();
   },
   watch: {
     data: {
       handler(newVal, oldVal) {
         if (newVal != oldVal) {
-          this.createRingChart()
+          this.createRingChart();
         }
       },
-      deep: true,
+      deep: true
     },
     title: {
       handler(newVal, oldVal) {
         if (newVal != oldVal) {
-          this.createRingChart()
+          this.createRingChart();
         }
       },
-      deep: true,
+      deep: true
     }
   },
   methods: {
     createRingChart() {
-      const jRingChart = echarts.init(this.$refs.jRingChart)
+      const jRingChart = echarts.init(this.$refs.jRingChart);
-      const { title } = this
+      const { title } = this;
       const option = {
         color: this.color,
         title: {
           show: true,
           text: title.text,
-          x: title.x || '48%',
+          x: title.x || "48%",
-          y: title.y || '36%',
+          y: title.y || "36%",
           z: 5,
-          textAlign: 'center',
+          textAlign: "center",
           textStyle: {
-            color: 'rgba(255, 255, 255, 1)',
+            color: "rgba(255, 255, 255, 1)",
             fontSize: title.fontSize || 20
           },
           subtext: title.subTitle,
           subtextStyle: {
-            color: 'rgba(255, 255, 255, 0.8)',
+            color: "rgba(255, 255, 255, 0.8)",
             fontSize: 13
           }
         },
@@ -77,18 +81,22 @@ export default {
           right: 0
         },
         legend: {
-          show: false
+          show: this.legend
         },
+        tooltip: {
+          trigger: 'item'
+        },
+
         series: [
           {
-            name: '',
+            type: "pie",
-            type: 'pie',
+            name:this.data.name,
             radius: this.radius,
             avoidLabelOverlap: false,
             hoverAnimation: false,
             label: {
               show: false,
-              position: 'center'
+              position: "center"
             },
             labelLine: {
               show: false
@@ -96,13 +104,11 @@ export default {
             data: this.data
           }
         ]
-      }
+      };
-
+      jRingChart.setOption(option);
-      console.log(option, '草')
-      jRingChart.setOption(option)
     }
   }
-}
+};
 </script>
 
 <style>

src/views/projectAdmin/zjsj/carbon/centerBottom.vue

@@ -84,7 +84,7 @@ export default {
   font-size: 12px;
   color: rgba(255, 255, 254, 0.6);
   width: 100%;
-  margin: 40px  30px 0px;
+  margin: 20px  30px 0px;
   .weatherItem {
     float: left;
     width: 13.28%;

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

@@ -119,7 +119,7 @@ export default {
       // });
       switch (this.checked) {
          case 1:
-         this.data = [90, 85, 100, 96, 100, 150, 190, 125 ]
+         this.data = [90, 125, 100, 96, 100, 150, 190, 125 ]
          break;
          case 2:
          this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]

src/views/projectAdmin/zjsj/carbon/leftCenter.vue

@@ -81,15 +81,14 @@ export default {
     margin-left: 5px;
   }
   .greenTable {
-    margin-top: 30px;
-
     th {
       color:#72bdc9;
       border-bottom: 1px solid rgba(31, 68, 86, 0.3);
+      line-height: 35px;
     }
     td {
       color: #c5c7cc;
-      line-height: 25px;
+      line-height: 35px;
     }
   }
   .alarmType {

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

@@ -41,7 +41,7 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
-  margin-top: 5%;
+  margin-top: 2%;
 
   .left,
   .right {

src/views/projectAdmin/zjsj/command/rightOne.vue

@@ -31,7 +31,7 @@
           </div>
           
           <div class="bottom">
-            <span class="label">安全生产起始日期：</span>
+            <span class="label">起始日期：</span>
             <div class="value">
               <span>2019</span>年
               <span>03</span>月

src/views/projectAdmin/zjsj/command/rightTwo.vue

@@ -70,7 +70,7 @@ export default {
             type: 'pie',
             radius: ['76%', '88%'],
             center: ['50%', '50%'],
-            hoverAnimation: true,
+            hoverAnimation: false,
             label: {
               normal: {
                 position: 'center'

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

@@ -4,10 +4,11 @@
       <div class="dllm">
         <div class="chart">
           <JRingChart
-            :title="{ text: '质量验收', subTitle: '987条件',fontSize: 14 }"
+            :title="{ text: '质量验收', subTitle: '2314条件',fontSize: 14 }"
             :color="['#6EE4F0', '#E7622A']"
-            :data="[{ value: 2314 }, { value: 987 }]"
+            :data="[{ value: 2314, name: '已验收' }, { value: 987 ,name: '未验收'}]"
             :radius="['60%', '80%']"
+            :legend="false"
           />
         </div>
         <div class="legend">
@@ -36,8 +37,9 @@
           <JRingChart
             :title="{ text: '质量整改', subTitle: '987条件',fontSize: 14 }"
             :color="['#6EE4F0', '#E7622A']"
-            :data="[{ value: 2314 }, { value: 987 }]"
+            :data="[{ value: 2314,name: '已整改' }, { value: 987,name: '未整改' }]"
             :radius="['60%', '80%']"
+            :legend="false"
           />
         </div>
         <div class="legend">

src/views/projectAdmin/zjsj/security/centerBottom.vue

@@ -23,7 +23,7 @@
       </div>
       <div class="tbody">
         <vue-scroll>
-          <div class="row" v-for="i in 8" :key="i">
+          <div class="row" v-for="i in 3" :key="i">
             <div class="td">{{i}}</div>
             <div class="td">深基坑临边防护</div>
             <div class="td">砌筑200mm以上挡水墙</div>
@@ -66,7 +66,7 @@
       </div>
       <div class="tbody">
         <vue-scroll>
-          <div class="row" v-for="i in 8" :key="i">
+          <div class="row" v-for="i in 3" :key="i">
             <div class="td">中建四项目深基坑</div>
             <div class="td">沉降监测3号</div>
             <div class="td">深层水平位移</div>
@@ -159,7 +159,7 @@ export default {
     line-height: 40px;
     .td {
       &:nth-child(1) {
-        width: 80px;
+        width: 120px;
       }
       &:nth-child(2) {
         flex: 1;
@@ -183,7 +183,7 @@ export default {
   }
   .dataImg {
     margin-left: 500px;
-    margin-top: 50px;
+    margin-top: 20px;
     p {
       margin-left: 4%;
     }

src/views/projectAdmin/zjsj/security/index.vue

@@ -45,10 +45,10 @@ export default {
     width: calc(60% - 40px);
     height: 100%;
     .top {
-      height: 60%;
+      height: 65%;
     }
     .bottom {
-      height: 40%;
+      height: 35%;
     }
   }
   .right {

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

@@ -10,7 +10,7 @@
       </div>
       <div class="tbody">
         <vue-scroll>
-          <div class="row" v-for="i in 9" :key="i">
+          <div class="row" v-for="i in 3" :key="i">
             <div>
               <img src="../assets/images/common/bg_fgy.png" />
             </div>

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

@@ -6,8 +6,9 @@
           <JRingChart
             :title="{ text: '安全隐患', subTitle: '987条件', fontSize: 14 }"
             :color="['#6EE4F0', '#E7622A']"
-            :data="[{ value: 2314 }, { value: 987 }]"
+            :data="[{ value: 2314,name:'已处理' }, { value: 987,name:'未处理' }]"
             :radius="['60%', '85%']"
+            :legend="false"
           />
         </div>
         <div class="legend">
@@ -34,10 +35,11 @@
       <div class="dllm">
         <div class="woria">
           <JRingChart
-            :title="{ text: '质量整改', subTitle: '987条件', fontSize: 14 }"
+            :title="{ text: '今日巡检', subTitle: '4400条件', fontSize: 14 }"
             :color="['#6EE4F0', '#E7622A']"
-            :data="[{ value: 2314 }, { value: 987 }]"
+            :data="[{ value: 2314,name:'已巡检' }, { value: 987,name:'未巡检' }]"
             :radius="['60%', '85%']"
+            :legend="false"
           />
         </div>
         <div class="legend">
@@ -96,7 +98,6 @@ export default {
         { type: 3, datetime: '2022-02-02 13:39:09', status: 3 },
         { type: 1, datetime: '2022-02-02 13:39:09', status: 1 },
         { type: 2, datetime: '2022-02-02 13:39:09', status: 2 },
-        { type: 3, datetime: '2022-02-02 13:39:09', status: 3 }
       ]
     }
   },
@@ -177,6 +178,7 @@ export default {
   color: #fff;
   .thead {
     color: #6ae3eb;
+    margin-bottom: 5px;
   }
   .tbody {
     height: calc(100% - 36px);

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

@@ -2,7 +2,7 @@
   <Card title="设备监控">
     <div class="devices">
       <vue-scroll>
-        <div class="device" v-for="i in 6" :key="i">
+        <div class="device" v-for="i in 4" :key="i">
           <div class="device-name">空压机{{i}}</div>
           <div class="info">
             <img class="image" src="../assets/images/common/bg_kyj.png" />
@@ -37,9 +37,9 @@ export default {
     width: 100%;
     height: 176px;
     .device-name {
-      margin-top: 20px;
+      // margin-top: 20px;
-      height: 36px;
+      height: 40px;
-      line-height: 36px;
+      line-height: 40px;
       font-size: 12px;
     }
     .info {

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

@@ -35,9 +35,6 @@ export default {
         { 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" },
       ]
     }
   }
@@ -60,7 +57,7 @@ export default {
     display: flex;
     align-items: center;
     &:not(:last-child) {
-      margin-bottom: 12px;
+      margin-bottom: 8px;
     }
     div {
       text-align: center;

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

@@ -37,8 +37,6 @@ export default {
         { 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" },
       ]
     };
   }

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

@@ -42,10 +42,10 @@ export default {
     width: 22%;
     height: 100%;
     .top {
-      height: 50%;
+      height: 60%;
     }
     .bottom {
-      height: 50%;
+      height: 40%;
     }
   }
   .right {

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

@@ -17,7 +17,7 @@ export default {
 <style lang="less" scoped>
 .list {
   box-sizing: border-box;
-  padding-top: 20px;
+  padding-top: 10px;
-  height: 100%;
+  height:100%;
 }
 </style>

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

@@ -44,7 +44,7 @@ export default {
 }
 .list {
   box-sizing: border-box;
-  padding-top: 20px;
+  padding-top: 30px;
   height: calc(100% - 120px);
 }
 </style>