+ 大屏开发

src/components/charts/LineChartBlock.vue

@@ -13,40 +13,20 @@ const basicSerie = {
   type: 'line',
 };
 const opts = {
-  legend: {
-    top: '5%',
-  },
   grid: {
-    top: 10,
     bottom: 20,
   },
   tooltip: {
     show: true,
     trigger: 'axis',
   },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-  },
-  yAxis: {
-    type: 'value',
-    name: 'kW·h',
-    minInterval: 1,
-    nameLocation: 'middle',
-    nameTextStyle: {
-      color: '#000',
-      fontSize: '14px',
-      lineHeight: 56,
-    },
+  legend: {
+    data: [],
   },
   series: [],
 };
 export default {
   props: {
-    title: {
-      default: '标题',
-      type: String,
-    },
     optCfg: {
       type: Object,
       default: () => {
@@ -78,7 +58,9 @@ export default {
       this.refCharts && this.refCharts.clear();
       const chartDom = document.getElementById(this.id);
       this.refCharts = echarts.init(chartDom);
-      const option = copyObj(opts);
+      let option = copyObj(opts);
+      const {series, xAxis, ...rest} = this.optCfg
+      Object.assign(option, rest);
       const legend = [];
       this.optCfg.series.forEach((item, index) => {
         const serie = copyObj(basicSerie);
@@ -89,11 +71,8 @@ export default {
           legend.push(name);
         }
       });
-      option.legend = {
-        data: legend,
-      };
+      option.legend.data = legend;
       option.xAxis = this.optCfg.xAxis;
-      option.yAxis.name = this.optCfg.unit || "kW·h"
       option && this.refCharts && this.refCharts.setOption(option);
       this.refCharts.resize();
     },

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

@@ -1,9 +1,19 @@
-<?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>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="272px" height="272px" viewBox="0 0 272 272" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 10</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="数字化施工平台-Digital-Construction-Dashboard备份-2" transform="translate(-3791, -1282)">
+            <g id="编组-2备份" transform="translate(3479, 1071)">
+                <g id="编组-10" transform="translate(312, 211)">
+                    <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="271" height="271"></rect>
+                    <ellipse id="椭圆形" stroke="#FFFFFF" stroke-width="1.67179487" fill-opacity="0.1" fill="#030C20" cx="136.39697" cy="135.701096" rx="119.561073" ry="119.561398"></ellipse>
+                    <ellipse id="椭圆形备份-8" stroke="#FFFFFF" stroke-width="0.835897436" fill-opacity="0.1" fill="#030C20" cx="136.39697" cy="135.701096" rx="66.4692568" ry="66.4694376"></ellipse>
+                    <ellipse id="椭圆形" fill="#FFFFFF" cx="136.39697" cy="135.701096" rx="10.8691709" ry="10.8692003"></ellipse>
+                    <path id="直线-3" d="M263.706051,131.193306 L271.706051,135.28305 L263.706051,139.372793 L263.706,135.7 L181.38202,135.700998 L181.38202,134.865101 L263.706,134.865 L263.706051,131.193306 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
+                    <path id="直线-3备份" d="M173.572354,222.507832 L181.572354,226.597575 L173.572354,230.687319 L173.572,227.015 L91.2480816,227.015524 L91.2480816,226.179626 L173.572,226.179 L173.572354,222.507832 Z" transform="translate(136.397, 226.5976) rotate(90) translate(-136.397, -226.5976)" fill="#FFFFFF" fill-rule="nonzero"></path>
+                    <line x1="91.6660303" y1="45.1489858" x2="181.12791" y2="45.1489858" id="直线-3备份-2" stroke="#FFFFFF" stroke-width="0.835897436" stroke-linecap="square" transform="translate(136.397, 45.149) rotate(90) translate(-136.397, -45.149)"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/cons/screen/index.scss

@@ -163,6 +163,8 @@
     .machine-pie-chart {
       height: 100px;
       width: 100px;
+      background: url("./img/pie-bg.png") 100% 100% no-repeat;
+      background-size: 100% 100%;
     }
 
     .machine-pie-legend {
@@ -284,6 +286,48 @@
 
   .dialog-content {
     width: 45vw;
-    height: 20px;
+
+    ::v-deep {
+      .el-descriptions__body {
+        background: transparent;
+        color: #BCC8DD;
+
+        .el-descriptions-item__container .el-descriptions-item__content {
+          justify-content: flex-end;
+          margin-right: 10px;
+          font-family: Helvetica-BoldOblique;
+          font-weight: BoldOblique;
+          color: #4FDFFF;
+        }
+      }
+    }
+
+    .machine-realtime-container {
+      width: 100%;
+      height: 250px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-direction: column;
+
+      > :not(:first-child) {
+        margin-top: 10px;
+      }
+
+      .realtime-title {
+        height: 20px;
+        width: 100%;
+        font-weight: 600;
+        letter-spacing: 0;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+      }
+
+      .realtime-chart {
+        flex: 1;
+        width: 100%;
+      }
+    }
   }
 }