状态监视模块完成

src/components/coms/table/table-span.vue

@@ -2,13 +2,14 @@
   <table class="com-table">
     <thead>
       <tr>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}<br v-if="col.unit != ''" />{{ col.unit }}</th>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }">{{ col.name }}<br v-if="col.unit != ''" />{{
+          col.unit }}</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="(row, index) of data.data" :key="index">
         <td :rowspan="rowspan(row, col)" :colspan="colspan(row, col)" v-for="(col, i) of data.column" :key="i" :class="{ light: col.is_light || row.is_light, num: col.is_num, remove: row[col.field] == '' }">
-          {{ row[col.field] }}
+          {{ row[col.field] || "a" }}
         </td>
       </tr>
     </tbody>
@@ -28,13 +29,13 @@ export default {
   // 自定义事件
   emits: {},
   // 数据
-  data() {
+  data () {
     return {};
   },
   computed: {},
   // 函数
   methods: {
-    rowspan: function(row, col) {
+    rowspan: function (row, col) {
       if (row.row_span.length == 0) {
         return 1;
       } else {
@@ -46,7 +47,7 @@ export default {
         }
       }
     },
-    colspan: function(row, col) {
+    colspan: function (row, col) {
       if (row.col_span.length == 0) {
         return 1;
       } else {
@@ -60,22 +61,22 @@ export default {
     },
   },
   // 生命周期钩子
-  beforeCreate() {
+  beforeCreate () {
     // 创建前
   },
-  created() {
+  created () {
     // 创建后
   },
-  beforeMount() {
+  beforeMount () {
     // 渲染前
   },
-  mounted() {
+  mounted () {
     // 渲染后
   },
-  beforeUpdate() {
+  beforeUpdate () {
     // 数据更新前
   },
-  updated() {
+  updated () {
     // 数据更新后
   },
 };
@@ -125,7 +126,7 @@ export default {
         }
 
         &.num {
-          font-family: "Bicubik";
+          font-family: 'Bicubik';
           font-weight: 400;
         }
 

src/views/Status/Status.vue

@@ -11,8 +11,12 @@
 
 <script>
 import StatusPanel from "./components/status-panel.vue";
-import ComTable from "@com/coms/table/table-span.vue";
+import ComTable from '@com/coms/table/table.vue';
 import util from "@/helper/util.js";
+
+import { datainit, webtest } from "@tools/websocket.js";
+import store from "@store/index.js";
+
 export default {
   // 名称
   name: "Status",
@@ -22,88 +26,28 @@ export default {
     ComTable,
   },
   // 数据
-  data() {
+  data () {
     return {
-      datas: [
-        {
-          title: "某某某风电场",
-          weather: {
-            type: "cloudy",
-            temperature: 11,
-          },
-          breakOff: false,
-          category: {
-            score: 66,
-            datas: [
-              { text: "运行", num: 30, color: "green" },
-              { text: "待机", num: 27, color: "purple" },
-              { text: "限电", num: 30, color: "yellow" },
-              { text: "检修", num: 30, color: "orange" },
-              { text: "故障", num: 13, color: "red" },
-              { text: "受累", num: 30, color: "blue" },
-              { text: "离线", num: 30, color: "gray" },
-            ],
-          },
-          items: [
-            {
-              f1: "AGC宋六:",
-              f2: "设定",
-              f3: "66",
-              f4: "出线",
-              f5: "11",
-              is_light: true,
-            },
-            {
-              f1: "升压站:",
-              f2: "出线Uab/La",
-              f3: "23/3 23/3",
-              f4: "电压",
-              f5: "103 103",
-              is_light: false,
-            },
-            {
-              f1: "风功:",
-              f2: "未来15分钟",
-              f3: "103",
-              f4: "",
-              f5: "",
-              is_light: false,
-            },
-            {
-              f1: "测风塔:",
-              f2: "风速",
-              f3: "103KM",
-              f4: "风向",
-              f5: "103 62",
-              is_light: false,
-            },
-            {
-              f1: "电能量表:",
-              f2: "",
-              f3: "103 62",
-              f4: "",
-              f5: "",
-              is_light: false,
-            },
-          ],
-        },
-      ],
+      loadingFlg: false, // 遮罩开关
+      websocketServe: null, // websocket 服务实例
+      sourceMap: {}, // 核心数据
+      datas: [],
       tableData: {
         column: [
           {
             name: "场站名称",
-            field: "name",
-            unit: "",
-            is_num: false,
-            is_light: false,
-          },
-          {
-            name: "调度名称",
-            field: "ddname",
+            field: "wpName",
             unit: "",
             is_num: false,
             is_light: false,
           },
+          // {
+          //   name: "调度名称",
+          //   field: "ddname",
+          //   unit: "",
+          //   is_num: false,
+          //   is_light: false,
+          // },
           {
             name: "装机容量",
             field: "zjrl",
@@ -144,7 +88,7 @@ export default {
             field: "gl",
             unit: "MW",
             is_num: true,
-            is_light: true,
+            is_light: false,
           },
           {
             name: "出线功率",
@@ -176,7 +120,7 @@ export default {
           },
           {
             name: "AGC指令",
-            field: "agc",
+            field: "aGCzl",
             unit: "MW",
             is_num: true,
             is_light: false,
@@ -190,457 +134,168 @@ export default {
           },
           {
             name: "SCADA发电量",
-            field: "scada",
+            field: "scadafdl",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
             name: "维修损失电量",
-            field: "wxssdl",
+            field: "whss",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
             name: "故障损失电量",
-            field: "gzssdl",
+            field: "gzss",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
             name: "受理损失电量",
-            field: "slssdl",
+            field: "slss",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
             name: "限电损失电量",
-            field: "xdssdl",
+            field: "xdss",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
           {
             name: "性能损失电量",
-            field: "xnssdl",
+            field: "xnss",
             unit: "万kwh",
             is_num: true,
             is_light: false,
           },
         ],
-        data: [
-          {
-            name: "风电场",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "风电场",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "风电场",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [["name", 2]],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "风电场",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [["name", 2]],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "风电场",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "风电合计",
-            ddname: "",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [["name", 2]],
-            is_light: true,
-          },
-          {
-            name: "风电场",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "风电场",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "风电场",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "风电场",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "风电场",
-            ddname: "牛二",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [],
-            is_light: false,
-          },
-          {
-            name: "光电合计",
-            ddname: "",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [["name", 2]],
-            is_light: false,
-          },
-          {
-            name: "总计",
-            ddname: "",
-            zjrl: 99,
-            fdl: 99,
-            swdl: 99,
-            lyxs: 99,
-            fs: 99,
-            gl: 99,
-            cxgl: 99,
-            llgl: 99,
-            bzgl: 99,
-            ycgl: 99,
-            agc: 99,
-            llfdl: 99,
-            scada: 99,
-            wxssdl: 99,
-            gzssdl: 99,
-            slssdl: 99,
-            xdssdl: 99,
-            xnssdl: 99,
-            row_span: [],
-            col_span: [["name", 2]],
-            is_light: false,
-          },
-        ],
+        data: [],
       },
     };
   },
   // 函数
   methods: {},
   // 生命周期钩子
-  beforeCreate() {
+  beforeCreate () {
     // 创建前
   },
-  created() {
-    // 创建后
-    let tempDatas = [];
-    for (let i = 0; i < 10; i++) {
-      let temp = util.copy(this.datas[0]);
-      if (i == 8) {
-        temp.breakOff = true;
-      }
-      tempDatas.push(temp);
-    }
-    this.datas = util.copy(tempDatas);
-  },
-  beforeMount() {
-    // 渲染前
-  },
-  mounted() {
-    // 渲染后
-  },
-  beforeUpdate() {
-    // 数据更新前
+  created () {
+    let that = this;
+    that.loadingFlg = true;
+    that.BASE.showLoading();
+    that.$nextTick(() => {
+      that.websocketServe && that.websocketServe.disconnect();
+      that.API.requestData({
+        method: "POST",
+        subUrl: "admin/websocketdisconnect",
+        success () {
+          that.websocketServe = datainit("/topic/wpInfoPush");
+        }
+      });
+    });
   },
-  updated() {
-    // 数据更新后
+
+  mounted () {
+
   },
+
+  watch: {
+    // 监听 websocket 回调并包装数据用于展示
+    '$store.state.windturbineMap': function (res) {
+      this.loadingFlg && this.BASE.closeLoading();
+      this.loadingFlg = false;
+      if (res) {
+        let sourceMap = JSON.parse(res);
+        let datas = [];
+        let data = [];
+        sourceMap.maps.forEach(ele => {
+          datas.push({
+            title: ele.name,
+            weather: {
+              type: "cloudy",
+              temperature: 11,
+            },
+            breakOff: ele.fczt === 3,
+            category: {
+              score: ele.zjts,
+              datas: [
+                { text: "运行", num: ele.yxts, color: "green" },
+                { text: "待机", num: ele.djts, color: "purple" },
+                { text: "限电", num: ele.xdts, color: "yellow" },
+                { text: "检修", num: ele.whts, color: "orange" },
+                { text: "故障", num: ele.gzts, color: "red" },
+                { text: "受累", num: ele.slts || 0, color: "blue" },
+                { text: "离线", num: ele.lxts, color: "gray" },
+              ],
+            },
+            items: [
+              {
+                f1: ("AGC" + ele.name.replace(/风电场/g, "") + ":"),
+                f2: "设定",
+                f3: ele.agcygsd,
+                f4: "出线",
+                f5: ele.agccxyg,
+                is_light: true,
+              },
+              {
+                f1: "升压站:",
+                f2: "出线Uab",
+                f3: ele.uab,
+                f4: "电流La",
+                f5: ele.ia,
+                is_light: false,
+              },
+              {
+                f1: "风功:",
+                f2: "未来15分钟",
+                f3: ele.ycgl,
+                f4: "",
+                f5: "",
+                is_light: false,
+              },
+              {
+                f1: "测风塔:",
+                f2: "风速",
+                f3: ((ele.cftfs || 0) + "m/s"),
+                f4: "风向",
+                f5: ele.cftfx || 0,
+                is_light: false,
+              },
+              {
+                f1: "电能量表:",
+                f2: "",
+                f3: ele.dnlb,
+                f4: "",
+                f5: "",
+                is_light: false,
+              },
+            ],
+          });
+        });
+
+        sourceMap.vos.forEach(ele => {
+          ele.row_span = [];
+          ele.col_span = [];
+          ele.is_light = false;
+          data.push(ele);
+        });
+
+        this.sourceMap = sourceMap;
+        this.datas = datas;
+        this.tableData.data = data;
+      } else {
+        this.sourceMap = {};
+        this.datas = [];
+        this.tableData.data = [];
+      }
+    }
+  }
 };
 </script>
 
@@ -677,7 +332,7 @@ export default {
 
     &::after,
     &::before {
-      content: "";
+      content: '';
       position: absolute;
       width: 0.185vh;
       height: 0.185vh;

src/views/Status/components/status-panel.vue

@@ -1,277 +1,273 @@
 <template>
-    <div class="status-panel">
-        <div class="pause" v-if="data.breakOff">中断</div>
-        <ComPanel class="status-com-panel" :title="data.title">
-            <div class="p-body">
-                <div class="category-box">
-                    <div class="score">
-                        <span>{{data.category.score}}</span>
-                    </div>
-                    <div class="box">
-                        <div class="category-item" v-for="(item, index) of data.category.datas" :key="index">
-                            <div>{{item.text}}</div>
-                            <div :class="item.color">{{item.num}}</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="item-box">
-                    <div class="data-item" v-for="(item, index) of data.items" :key="index" :class="{ 'light': item.is_light }">
-                        <div class="f1">{{item.f1}}</div>
-                        <div class="f2">{{item.f2}}</div>
-                        <div class="f3">{{item.f3}}</div>
-                        <div class="f4">{{item.f4}}</div>
-                        <div class="f5">{{item.f5}}</div>
-                    </div>
-                </div>
+  <div class="status-panel">
+    <div class="pause" v-if="data.breakOff">中断</div>
+    <ComPanel class="status-com-panel" :title="data.title">
+      <div class="p-body">
+        <div class="category-box">
+          <div class="score">
+            <span>{{data.category.score}}</span>
+          </div>
+          <div class="box">
+            <div class="category-item" v-for="(item, index) of data.category.datas" :key="index">
+              <div>{{item.text}}</div>
+              <div :class="item.color">{{item.num}}</div>
             </div>
-        </ComPanel>
-    </div>
+          </div>
+        </div>
+        <div class="item-box">
+          <div class="data-item" v-for="(item, index) of data.items" :key="index" :class="{ 'light': item.is_light }">
+            <div class="f1">{{item.f1}}</div>
+            <div class="f2">{{item.f2}}</div>
+            <div class="f3">{{item.f3}}</div>
+            <div class="f4">{{item.f4}}</div>
+            <div class="f5">{{item.f5}}</div>
+          </div>
+        </div>
+      </div>
+    </ComPanel>
+  </div>
 </template>
 
 <script>
-    import ComPanel from '@com/coms/panel/panel.vue'
-    export default {
-        // 名称
-        name: "StatusPanel",
-        // 使用组件
-        components: {
-            ComPanel
-        },
-        /**
-         * {
-                title: "某某某风电场",
-                weather: {
-                    type: "cloudy",
-                    temperature: 11
-                },
-                breakOff: false,
-                category: {
-                    score: 66,
-                    datas: [
-                        { text: "运行", num: 30, color: 'green' },
-                        { text: "待机", num: 27, color: 'purple' },
-                        { text: "限电", num: 30, color: 'yellow' },
-                        { text: "检修", num: 30, color: 'orange' },
-                        { text: "故障", num: 13, color: 'red' },
-                        { text: "受累", num: 30, color: 'blue' },
-                        { text: "离线", num: 30, color: 'gray' },
-                    ]
-                },
-                items: [
-                    { f1: 'AGC宋六:', f2: '设定', f3: '66', f4: '出线', f5: '11', is_light: true },
-                    { f1: '升压站:', f2: '出线Uab/La', f3: '23/3 23/3', f4: '电压', f5: '103 103', is_light: false },
-                    { f1: '风功:', f2: '未来15分钟', f3: '103', f4: '', f5: '', is_light: false },
-                    { f1: '测风塔:', f2: '风速', f3: '103KM', f4: '风向', f5: '103 62', is_light: false },
-                    { f1: '电能量表:', f2: '', f3: '103 62', f4: '', f5: '', is_light: false },
-                ]
-            }
-         */
-        props: {
-            data: Object
-        },
-        // 数据
-        data() {
-            return {
+import ComPanel from '@com/coms/panel/panel.vue'
+export default {
+  // 名称
+  name: "StatusPanel",
+  // 使用组件
+  components: {
+    ComPanel
+  },
+  /**
+   * {
+          title: "某某某风电场",
+          weather: {
+              type: "cloudy",
+              temperature: 11
+          },
+          breakOff: false,
+          category: {
+              score: 66,
+              datas: [
+                  { text: "运行", num: 30, color: 'green' },
+                  { text: "待机", num: 27, color: 'purple' },
+                  { text: "限电", num: 30, color: 'yellow' },
+                  { text: "检修", num: 30, color: 'orange' },
+                  { text: "故障", num: 13, color: 'red' },
+                  { text: "受累", num: 30, color: 'blue' },
+                  { text: "离线", num: 30, color: 'gray' },
+              ]
+          },
+          items: [
+              { f1: 'AGC宋六:', f2: '设定', f3: '66', f4: '出线', f5: '11', is_light: true },
+              { f1: '升压站:', f2: '出线Uab/La', f3: '23/3 23/3', f4: '电压', f5: '103 103', is_light: false },
+              { f1: '风功:', f2: '未来15分钟', f3: '103', f4: '', f5: '', is_light: false },
+              { f1: '测风塔:', f2: '风速', f3: '103KM', f4: '风向', f5: '103 62', is_light: false },
+              { f1: '电能量表:', f2: '', f3: '103 62', f4: '', f5: '', is_light: false },
+          ]
+      }
+   */
+  props: {
+    data: Object
+  },
+  // 数据
+  data () {
+    return {
 
-            }
-        },
-        // 函数
-        methods: {},
-        // 生命周期钩子
-        beforeCreate() {
-            // 创建前
-        },
-        created() {
-            // 创建后
-        },
-        beforeMount() {
-            // 渲染前
-        },
-        mounted() {
-            // 渲染后
-        },
-        beforeUpdate() {
-            // 数据更新前
-        },
-        updated() {
-            // 数据更新后
-        },
     }
+  },
+  // 函数
+  methods: {},
+  // 生命周期钩子
+  beforeCreate () {
+    // 创建前
+  },
+  created () {
+    // 创建后
+  },
+  beforeMount () {
+    // 渲染前
+  },
+  mounted () {
+    // 渲染后
+  },
+  beforeUpdate () {
+    // 数据更新前
+  },
+  updated () {
+    // 数据更新后
+  },
+}
 </script>
 
 <style lang="less" scoped>
-    .status-panel {
-        position: relative;
-        height: 22.315vh;
+.status-panel {
+  position: relative;
+  height: 22.315vh;
 
-        .pause {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            z-index: 1;
-            left: 0;
-            top: 0;
-            background-color: fade(@darkgray, 50%);
-            color: fade(@write, 60%);
-            font-size: 5.556vh;
-            font-weight: 600;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            opacity: 0.9;
-            backdrop-filter: blur(0.370vh);
-        }
-
-        .status-com-panel {
-            width: 100%;
-            height: 100%;
+  .pause {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    background-color: fade(@darkgray, 50%);
+    color: fade(@write, 60%);
+    font-size: 5.556vh;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.9;
+    backdrop-filter: blur(0.37vh);
+  }
 
-            .p-body {
-                width: 100%;
-                height: 19.074vh;
-                display: flex;
-                flex-direction: column;
-                margin-top: -0.926vh;
+  .status-com-panel {
+    width: 100%;
+    height: 100%;
 
-                .category-box {
-                    width: 100%;
-                    background-color: fade(@darkgray, 30%);
-                    display: flex;
-                    margin-bottom: 0.37vh;
+    .p-body {
+      width: 100%;
+      height: 19.074vh;
+      display: flex;
+      flex-direction: column;
+      margin-top: -0.926vh;
 
-                    .score {
-                        padding: 0.833vh 1.481vh;
+      .category-box {
+        width: 100%;
+        background-color: fade(@darkgray, 30%);
+        display: flex;
+        margin-bottom: 0.37vh;
 
-                        span {
-                            width: 3.889vh;
-                            height: 3.889vh;
-                            border-radius: 50%;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            color: @green;
-                            border: 0.093vh solid @green;
-                            background-color: fade(@green, 20%);
-                            font-size: @fontsize;
-                        }
-                    }
+        .score {
+          padding: 0.833vh 1.481vh;
 
-                    .box {
-                        flex-grow: 1;
-                        display: flex;
+          span {
+            width: 3.889vh;
+            height: 3.889vh;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: @green;
+            border: 0.093vh solid @green;
+            background-color: fade(@green, 20%);
+            font-size: @fontsize;
+          }
+        }
 
-                        .category-item {
-                            flex: 1;
-                            display: flex;
-                            flex-direction: column;
-                            align-items: center;
-                            justify-content: center;
-                            font-weight: 600;
+        .box {
+          flex-grow: 1;
+          display: flex;
 
-                            div {
-                                flex: 1;
-                                font-size: @fontsize-s;
+          .category-item {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-weight: 600;
 
-                                &:first-child {
-                                    display: flex;
-                                    align-items: flex-end;
-                                    color: @gray;
-                                }
-                            }
-                        }
-                    }
-                }
+            div {
+              flex: 1;
+              font-size: @fontsize-s;
 
-                .item-box {
-                    flex-grow: 1;
-                    display: flex;
-                    flex-direction: column;
+              &:first-child {
+                display: flex;
+                align-items: flex-end;
+                color: @gray;
+              }
+            }
+          }
+        }
+      }
 
-                    .data-item {
-                        flex: 1;
-                        display: flex;
-                        flex-direction: row;
-                        background-color: fade(@darkgray, 20%);
-                        margin-top: 0.278vh;
+      .item-box {
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
 
-                        div {
-                            font-size: @fontsize-s;
-                            overflow: hidden;
-                            display: flex;
-                            align-items: center;
-                        }
+        .data-item {
+          flex: 1;
+          display: flex;
+          flex-direction: row;
+          background-color: fade(@darkgray, 20%);
+          margin-top: 0.278vh;
 
-                        .f1,
-                        .f2,
-                        .f4 {
-                            text-align: right;
-                            color: @gray;
-                            justify-content: flex-end;
-                        }
+          div {
+            font-size: @fontsize-s;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+          }
 
-                        .f3,
-                        .f5 {
-                            font-family: "Bicubik";
-                            text-align: left;
-                            color: @green;
-                            justify-content: flex-start;
-                        }
+          .f1,
+          .f2,
+          .f4 {
+            text-align: right;
+            color: @gray;
+            justify-content: flex-end;
+          }
 
-                        .f1 {
-                            flex: 2;
-                        }
+          .f3,
+          .f5 {
+            font-family: 'Bicubik';
+            text-align: left;
+            color: @green;
+            justify-content: flex-start;
+          }
 
-                        .f2 {
-                            flex: 3;
-                            margin-right: 0.556vh;
-                        }
+          .f1 {
+            flex: 2;
+          }
 
-                        .f3 {
-                            flex: 3;
-                        }
+          .f2 {
+            flex: 3;
+            margin-right: 0.556vh;
+          }
 
-                        .f4 {
-                            flex: 1;
-                            margin-right: 0.556vh;
-                        }
+          .f3 {
+            flex: 3;
+          }
 
-                        .f5 {
-                            flex: 2;
-                            margin-right: 0;
-                        }
+          .f4 {
+            flex: 1;
+            margin-right: 0.556vh;
+          }
 
+          .f5 {
+            flex: 2;
+            margin-right: 0;
+          }
 
-                        &.light {
-                            background-color: fade(@darkgray, 50%);
-                            position: relative;
-                            
-                            &::after {
-                                content: '';
-                                position: absolute;
-                                height: 100%;
-                                width: 0.278vh;
-                                background-color: @green;
-                                top: 0;
-                                left: 0;
-                            }
-                            
-                            .f1,
-                            .f2,
-                            .f4 {
-                                color: @write;
-                            }
-                            
-                            .f3,
-                            .f5 {
-                                color: fade(@write, 60%);
-                            }
-                        }
+          &.light {
+            background-color: fade(@darkgray, 50%);
+            position: relative;
 
-                    }
-                }
+            &::after {
+              content: '';
+              position: absolute;
+              height: 100%;
+              width: 0.278vh;
+              background-color: @green;
+              top: 0;
+              left: 0;
             }
 
+            .f1,
+            .f2,
+            .f4 {
+              color: @write;
+            }
 
+            .f3,
+            .f5 {
+              color: fade(@write, 60%);
+            }
+          }
         }
+      }
     }
+  }
+}
 </style>