+ 大屏开发

src/components/charts/BarChartBlock.vue

@@ -65,10 +65,6 @@ const opts = {
 };
 export default {
   props: {
-    title: {
-      default: '标题',
-      type: String,
-    },
     optCfg: {
       type: Object,
       default: () => {

src/components/charts/PieChartBlock.vue

@@ -42,10 +42,6 @@ const opts = {
 };
 export default {
   props: {
-    title: {
-      default: '标题',
-      type: String,
-    },
     optCfg: {
       type: Object,
       default: () => {

src/components/charts/index.scss

@@ -1,9 +1,8 @@
 @import "src/assets/styles";
 
-.grid-content {
-  .grid-chart {
-    flex-grow: 1;
-    width: 100%;
-  }
+.grid-chart {
+  flex-grow: 1;
+  width: 100%;
+  height: 100%;
 }
 

src/views/cons/screen/ContentBlock.vue

@@ -43,6 +43,7 @@ export default {
     font-size: 14px;
     background: url("./img/block-header-bg.png") 100% 100% no-repeat;
     background-size: 100% 100%;
+    letter-spacing: 1px;
   }
 }
 </style>

src/views/cons/screen/img/target.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1740208374226" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2433"
+     width="256.5" height="256" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M512 682.422857A170.422857 170.422857 0 1 1 683.885714 512 170.422857 170.422857 0 0 1 512 682.422857z m0-275.017143A104.594286 104.594286 0 1 0 618.057143 512 104.594286 104.594286 0 0 0 512 407.405714z"
+          p-id="2434" fill="#fefefe"></path>
+    <path d="M991.085714 479.085714H950.857143a438.857143 438.857143 0 0 0-405.942857-401.554285V32.914286a32.914286 32.914286 0 0 0-65.828572 0v44.617143a438.857143 438.857143 0 0 0-400.091428 401.554285H32.914286a32.914286 32.914286 0 1 0 0 65.828572h46.08a438.857143 438.857143 0 0 0 400.091428 401.554285v44.617143a32.914286 32.914286 0 0 0 65.828572 0v-44.617143A438.857143 438.857143 0 0 0 950.857143 544.914286h43.154286a32.914286 32.914286 0 1 0 0-65.828572zM544.914286 877.714286v-92.16a32.914286 32.914286 0 0 0-65.828572 0V877.714286A365.714286 365.714286 0 0 1 146.285714 544.914286h92.16a32.914286 32.914286 0 0 0 0-65.828572H146.285714A365.714286 365.714286 0 0 1 479.085714 146.285714v92.16a32.914286 32.914286 0 0 0 65.828572 0V146.285714A365.714286 365.714286 0 0 1 877.714286 479.085714h-95.085715a32.914286 32.914286 0 0 0 0 65.828572H877.714286A365.714286 365.714286 0 0 1 544.914286 877.714286z"
+          fill="#fefefe" p-id="2435"></path>
+</svg>

src/views/cons/screen/index.scss

@@ -147,5 +147,143 @@
     right: 1vw;
     width: 23vw;
     top: 60px;
+
+    > :not(:first-child) {
+      margin-top: 20px;
+    }
+  }
+
+  .online-summery {
+    width: 100%;
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .machine-pie-chart {
+      height: 100px;
+      width: 100px;
+    }
+
+    .machine-pie-legend {
+      color: #fefefe;
+      width: calc(80% - 100px);
+
+      .legend-item {
+        height: 40px;
+        width: 100%;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+
+        > i {
+          display: inline-block;
+          width: 10px;
+          height: 10px;
+        }
+      }
+    }
+  }
+
+  .online-list {
+    width: 100%;
+    height: 120px;
+
+    > :not(:first-child) {
+      margin-top: 10px;
+    }
+
+    .list-item {
+      box-sizing: border-box;
+      padding: 0 10px;
+      color: #fefefe;
+      width: 100%;
+      height: 30px;
+      box-shadow: inset 0 0 1px 1px #31b9fd66;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  .offset-status {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-direction: column;
+
+    > :not(:first-child) {
+      margin-top: 10px;
+    }
+
+    .offset-title {
+      height: 20px;
+      font-weight: 600;
+      font-size: 15px;
+      color: #98CDFB;
+      letter-spacing: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .offset-item {
+      width: 140px;
+      height: 140px;
+      background: url("./img/target.svg") 100% 100% no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+
+}
+
+
+.screen-dialog {
+  ::v-deep {
+    .el-dialog {
+      background: #02102C;
+      border: solid 2px rgba(49, 185, 253, 0.8);
+      box-sizing: border-box;
+      border-radius: 4px;
+      width: fit-content;
+    }
+
+    .el-dialog__header {
+      padding: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+
+      .el-dialog__headerbtn {
+        position: unset;
+
+        .el-dialog__close {
+          color: #fefefe;
+          font-size: 20px;
+        }
+
+      }
+    }
+
+    .el-dialog__title {
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 13px;
+      letter-spacing: 1px;
+      color: #FFFFFF;
+    }
+
+    .el-dialog__body {
+      box-sizing: border-box;
+      padding: 20px;
+    }
+  }
+
+  .dialog-content {
+    width: 45vw;
+    height: 20px;
   }
 }

src/views/cons/screen/index.vue

@@ -28,17 +28,62 @@
         </div>
       </template>
     </content-block>
-
     <div class="screen-right-container">
       <content-block title="Online Machinery" class="online-machine-block">
         <template v-slot:content>
           <div class="online-summery">
+            <div class="machine-pie-chart">
+              <pie-chart-block :optCfg="machineOpt"/>
+            </div>
+            <div class="machine-pie-legend">
+              <div class="legend-item">
+                <i :style="{ backgroundColor:machineOpt.color[0] }"/>
+                <span>Online Machinery</span>
+                <span>7</span>
+              </div>
+              <div class="legend-item">
+                <i :style="{ backgroundColor:machineOpt.color[1] }"/>
+                <span>Offline Machinery</span>
+                <span>7</span>
+              </div>
+            </div>
           </div>
           <div class="online-list">
+            <div class="list-item">
+              <span class="machine-name">004</span>
+              <span class="cons-unit">Machine Name</span>
+            </div>
+            <div class="list-item">
+              <span class="machine-name">004</span>
+              <span class="cons-unit">Machine Name</span>
+            </div>
+            <div class="list-item">
+              <span class="machine-name">004</span>
+              <span class="cons-unit">Machine Name</span>
+            </div>
+          </div>
+        </template>
+      </content-block>
+      <content-block title="Piling Machine" class="pile-machine-status">
+        <template v-slot:content>
+          <div class="offset-status">
+            <div class="offset-title">
+              Drill Rod Inclination
+            </div>
+            <div class="offset-item">
+            </div>
           </div>
         </template>
       </content-block>
     </div>
+    <el-dialog class="screen-dialog" title="Vibration Pipe Sinking and Stone Crushing Pile Information"
+               :visible.sync="open"
+               :modal="false"
+               append-to-body>
+      <div class="dialog-content">
+
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -47,9 +92,10 @@ import BdMap from "@/components/map/index.vue";
 import Treeselect from "@riophae/vue-treeselect";
 import ConsUnitTree from "@/views/cons/consUnit/ConsUnitTree.vue";
 import ContentBlock from "@/views/cons/screen/ContentBlock.vue";
+import PieChartBlock from "@/components/charts/PieChartBlock.vue";
 
 export default {
-  components: {ContentBlock, ConsUnitTree, BdMap, Treeselect},
+  components: {PieChartBlock, ContentBlock, ConsUnitTree, BdMap, Treeselect},
   props: {
     ws: {
       type: String,
@@ -74,7 +120,50 @@ export default {
       consUnit: null,
       searchVal: "",
       count: 10,
-      loading: false
+      loading: false,
+      open: true,
+      machineOpt: {
+        color: ['#006699', '#4cabce'],
+        tooltip: {
+          show: false
+        },
+        legend: {
+          show: false,
+          top: 0
+        },
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
+            show: false,
+          }
+        },
+        labelLine: {
+          show: false
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '70%'],
+            center: ['50%', '50%'],
+            label: {
+              show: false,
+              position: 'center'
+            },
+            data: [
+              {
+                value: 19,
+                name: 'online',
+              },
+              {
+                value: 75,
+                name: 'offline',
+              }
+            ],
+          },
+        ],
+      },
     };
   },
   // 组件卸载前清空图层信息