From ecfd60e249d4e807b6b9bd161e8b11228cdec88d Mon Sep 17 00:00:00 2001
From: Tony <weijialin@inspur.com>
Date: Wed, 3 Apr 2024 12:44:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tzipc-ui/src/assets/styles/element-ui.scss |  16 +-
 tzipc-ui/src/views/zf/bigscreen/index.vue  | 719 ++++++++++++++++++++-
 2 files changed, 708 insertions(+), 27 deletions(-)

diff --git a/tzipc-ui/src/assets/styles/element-ui.scss b/tzipc-ui/src/assets/styles/element-ui.scss
index 73c9d63..b45c416 100644
--- a/tzipc-ui/src/assets/styles/element-ui.scss
+++ b/tzipc-ui/src/assets/styles/element-ui.scss
@@ -530,10 +530,10 @@ div.el-table {
 }
 .pagination-container {
   .el-pagination__total {
-    color: #fff;
+    @include font_color(buttonFontColor);
   }
   .el-pagination__jump {
-    color: #fff;
+    @include font_color(buttonFontColor);
   }
 }
 
@@ -543,14 +543,22 @@ div.el-table {
 .el-pagination.is-background .btn-prev,
 .el-pagination.is-background .btn-next {
   background-color: transparent;
-  color: #fff;
+  @include font_color(buttonFontColor);
 }
 .el-pagination.is-background .el-pager li:not(.active) {
   border: 1px solid #47cbfb;
   background-color: transparent;
-  color: #fff;
+  @include font_color(buttonFontColor);
   border-radius: 4px;
 }
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  @include border_color(buttonActiveBackgroundColor);
+  @include background_color(buttonActiveBackgroundColor);
+  @include font_color(buttonActiveFontColor);
+  border-radius: 4px;
+}
+
 div.el-switch {
   .el-switch__core {
     background-color: transparent;
diff --git a/tzipc-ui/src/views/zf/bigscreen/index.vue b/tzipc-ui/src/views/zf/bigscreen/index.vue
index ea7cd09..b53d8aa 100644
--- a/tzipc-ui/src/views/zf/bigscreen/index.vue
+++ b/tzipc-ui/src/views/zf/bigscreen/index.vue
@@ -5,67 +5,699 @@
                 <div class="card-item-wrapper">
                     <div class="card-big-title">R上辊操作侧数据监控</div>
                     <div class="card-sub-title">油膜轴承振动监测</div>
-                    <div class="card-main-item-wrapper">IIIIIIII</div>
+                    <div class="card-main-item-wrapper" id="chart1" style="height:calc(100% - 6.4rem);"></div>
                 </div>
             </div>
-            <div
-                class="grid-item-wrapper"
-                style="grid-row: span 2;grid-column: span 2;padding: 2rem;"
-            >
+            <div class="grid-item-wrapper" style="grid-row: span 2;grid-column: span 2;padding: 2rem;">
                 <div class="device-image"></div>
             </div>
             <div class="grid-item-wrapper">
                 <div class="card-item-wrapper">
                     <div class="card-big-title">R上棍传动侧数据监控</div>
                     <div class="card-sub-title">油膜轴承振动监测</div>
-                    <div class="card-main-item-wrapper">IIIIIIII</div>
+                    <div class="card-main-item-wrapper" id="chart2" style="height:calc(100% - 6.4rem);"></div>
                 </div>
             </div>
             <div class="grid-item-wrapper">
                 <div class="card-item-wrapper">
                     <div class="card-sub-title">油液颗粒度特性</div>
-                    <div class="card-main-item-wrapper">IIIIIIII</div>
+                    <div class="card-main-item-wrapper" id="chart3" style="height:calc(100% - 2.8rem);"></div>
                 </div>
             </div>
             <div class="grid-item-wrapper">
                 <div class="card-item-wrapper">
                     <div class="card-sub-title">油液颗粒度特性</div>
-                    <div class="card-main-item-wrapper">IIIIIIII</div>
+                    <div class="card-main-item-wrapper" id="chart4" style="height:calc(100% - 2.8rem);"></div>
                 </div>
             </div>
-            <div
-                class="grid-item-wrapper"
-                style="grid-column: span 2;"
-            >
+            <div class="grid-item-wrapper" style="grid-column: span 2;">
                 <div class="card-item-wrapper">
                     <div class="big-car-title-bg">油膜轴承系统油品特性</div>
-                    <div class="card-main-item-wrapper">IIIIIIII</div>
+                    <div class="card-main-item-wrapper" style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);">
+                        <div class="bottom-grid-wrapper">
+                            <div class="bottom-grid-item">
+                                <div id="bottomL1" style="width: 100%;aspect-ratio: 1;"></div>
+                                <div style="font-family: 'BiaoTi';">油水含量</div>
+                            </div>
+                            <div class="bottom-grid-item">
+                                <div id="bottomL2" style="width: 100%;aspect-ratio: 1;"></div>
+                                <div style="font-family: 'BiaoTi';">油品粘度</div>
+                            </div>
+                            <div class="bottom-grid-item">
+                                <div id="bottomL3" style="width: 100%;aspect-ratio: 1;"></div>
+                                <div style="font-family: 'BiaoTi';">进油压力</div>
+                            </div>
+                            <div class="bottom-grid-item">
+                                <div
+                                    style="width: 100%;aspect-ratio: 1;"
+                                    class="extra-bar-wrapper"
+                                >
+                                    <div class="extra-bar-item" :style="`height: ${parseInt(l1 * 100)}%;background-color:#6581f0;`"></div>
+                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(l1 * 100)}%);`">
+                                        {{ parseInt(l1 * 100) }}
+                                    </div>
+                                </div>
+                                <div style="font-family: 'BiaoTi';">回油温度</div>
+                            </div>
+                            <div class="bottom-grid-item">
+                                <div
+                                    style="width: 100%;aspect-ratio: 1;"
+                                    class="extra-bar-wrapper"
+                                >
+                                    <div class="extra-bar-item" :style="`height: ${parseInt(l2 * 100)}%;background-color:#19ca88;`"></div>
+                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(l2 * 100)}%);`">
+                                        {{ parseInt(l2 * 100) }}
+                                    </div>
+                                </div>
+                                <div style="font-family: 'BiaoTi';">轴套区温度</div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div
-                class="grid-item-wrapper"
-                style="grid-column: span 2;"
-            >
+            <div class="grid-item-wrapper" style="grid-column: span 2;">
                 <div class="card-item-wrapper">
                     <div class="big-car-title-bg">油膜轴承系统油品特性</div>
-                    <div class="card-main-item-wrapper">IIIIIIII</div>
+                    <div class="card-main-item-wrapper" style="padding: .8rem 1.2rem;height: calc(100% - 2.4rem);">
+                        <div class="bottom-grid-wrapper">
+                            <div class="bottom-grid-item">
+                                <div
+                                    style="width: 100%;aspect-ratio: 1;"
+                                    class="extra-bar-wrapper"
+                                >
+                                    <div class="extra-bar-item" :style="`height: ${parseInt(r1 * 100)}%;background-color:#19ca88;`"></div>
+                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(r1 * 100)}%);`">
+                                        {{ parseInt(r1 * 100) }}
+                                    </div>
+                                </div>
+                                <div style="font-family: 'BiaoTi';">轴套区温度</div>
+                            </div>
+                            <div class="bottom-grid-item">
+                                <div
+                                    style="width: 100%;aspect-ratio: 1;"
+                                    class="extra-bar-wrapper"
+                                >
+                                    <div class="extra-bar-item" :style="`height: ${parseInt(r2 * 100)}%;background-color:#6581f0;`"></div>
+                                    <div class="extra-bar-text" :style="`height: calc(100% - ${parseInt(r2 * 100)}%);`">
+                                        {{ parseInt(r2 * 100) }}
+                                    </div>
+                                </div>
+                                <div style="font-family: 'BiaoTi';">回油温度</div>
+                            </div>
+                            <div class="bottom-grid-item">
+                                <div id="bottomR1" style="width: 100%;aspect-ratio: 1;"></div>
+                                <div style="font-family: 'BiaoTi';">进油压力</div>
+                            </div>
+                            <div class="bottom-grid-item">
+                                <div id="bottomR2" style="width: 100%;aspect-ratio: 1;"></div>
+                                <div style="font-family: 'BiaoTi';">油品粘度</div>
+                            </div>
+                            <div class="bottom-grid-item">
+                                <div id="bottomR3" style="width: 100%;aspect-ratio: 1;"></div>
+                                <div style="font-family: 'BiaoTi';">油水含量</div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
     </div>
 </template>
 <script>
+import * as echarts from "echarts";
+import { isArray, merge } from "lodash";
+import request from "@/utils/request";
+
 export default {
     name: 'BigScreen',
     data() {
-        return {}
+        return {
+            l1: 0,
+            l2: 0,
+
+            r1: 0,
+            r2: 0
+        }
     },
-    created() {
-        this.initBigScreen()
+    mounted() {
+        this.getDataResponse(['rtd', 'rto']).then(({ data }) => {
+            console.log('RREESS', data);
+            const { drive, operation } = data;
+            // 处理传动测数据
+            if (drive) {
+                const { xSensorData, vx, vy, vz } = drive;
+                this.initChart2(xSensorData, vx, vy, vz)
+
+                const { xPlcData, pz4, pz6, pz14, pz21 } = drive
+                this.initChart4(xPlcData, pz4, pz6, pz14, pz21)
+
+                const { ssat, rot, oip, ov, owc } = drive
+
+                this.initBottomR1(oip)
+                this.initBottomR2(ov)
+                this.initBottomR3(owc)
+
+                console.log('ssat', ssat);
+                this.r1 = ssat
+                this.r2 = rot
+            }
+            // 处理操作侧数据
+            if (operation) {
+                const { xSensorData, vx, vy, vz } = operation;
+                this.initChart1(xSensorData, vx, vy, vz)
+
+                const { xPlcData, pz4, pz6, pz14, pz21 } = operation;
+                this.initChart3(xPlcData, pz4, pz6, pz14, pz21)
+
+                const { owc, ov, oip, rot, ssat } = operation
+                this.initBottomL1(owc)
+                this.initBottomL2(ov)
+                this.initBottomL3(oip)
+                
+                this.l1 = rot
+                this.l2 = ssat
+            }
+        })
+
     },
     methods: {
-        initBigScreen() {
-            console.log('initBigScreen');
+        initChart1(xAxis = [], vx, vy, vz) {
+            const chartIns = echarts.init(document.getElementById("chart1"));
+            chartIns.setOption(this.generateOptions({
+                xAxis: {
+                    data: xAxis
+                },
+                yAxis: { name: "单位: ㎛" },
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        type: "cross",
+                        label: {
+                            backgroundColor: "#6a7985",
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: "X轴",
+                        type: "line",
+                        symbol: "none",
+                        data: vx,
+                    },
+                    {
+                        name: "Y轴",
+                        type: "line",
+                        symbol: "none",
+                        data: vy,
+                    },
+                    {
+                        name: "Z轴",
+                        type: "line",
+                        symbol: "none",
+                        data: vz,
+                    },
+                ],
+            }), true, true);
+            window.addEventListener("resize", () => {
+                chartIns && chartIns.resize();
+            });
+        },
+        initChart2(xAxis = [], vx, vy, vz) {
+            const chartIns = echarts.init(document.getElementById("chart2"));
+            chartIns.setOption(this.generateOptions({
+                xAxis: {
+                    data: xAxis
+                },
+                yAxis: { name: "单位: ㎛" },
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        type: "cross",
+                        label: {
+                            backgroundColor: "#6a7985",
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: "X轴",
+                        type: "line",
+                        symbol: "none",
+                        data: vx,
+                    },
+                    {
+                        name: "Y轴",
+                        type: "line",
+                        symbol: "none",
+                        data: vy,
+                    },
+                    {
+                        name: "Z轴",
+                        type: "line",
+                        symbol: "none",
+                        data: vz,
+                    },
+                ],
+            }), true, true);
+            window.addEventListener("resize", () => {
+                chartIns && chartIns.resize();
+            });
+        },
+        initChart3(xAxis = [], pz4, pz6, pz14, pz21) {
+            const chartIns = echarts.init(document.getElementById("chart3"));
+            chartIns.setOption(this.generateOptions({
+                xAxis: {
+                    data: xAxis
+                },
+                yAxis: { name: "单位: ㎛" },
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        type: "cross",
+                        label: {
+                            backgroundColor: "#6a7985",
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: "4㎛",
+                        type: "line",
+                        symbol: "none",
+                        data: pz4,
+                    },
+                    {
+                        name: "6㎛",
+                        type: "line",
+                        symbol: "none",
+                        data: pz6,
+                    },
+                    {
+                        name: "14㎛",
+                        type: "line",
+                        symbol: "none",
+                        data: pz14,
+                    },
+                    {
+                        name: "21㎛",
+                        type: "line",
+                        symbol: "none",
+                        data: pz21,
+                    },
+                ],
+            }), true, true);
+            window.addEventListener("resize", () => {
+                chartIns && chartIns.resize();
+            });
+        },
+        initChart4(xAxis = [], pz4, pz6, pz14, pz21) {
+            const chartIns = echarts.init(document.getElementById("chart4"));
+            chartIns.setOption(this.generateOptions({
+                xAxis: {
+                    data: xAxis
+                },
+                yAxis: { name: "单位: ㎛" },
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                        type: "cross",
+                        label: {
+                            backgroundColor: "#6a7985",
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: "4㎛",
+                        type: "line",
+                        symbol: "none",
+                        data: pz4,
+                    },
+                    {
+                        name: "6㎛",
+                        type: "line",
+                        symbol: "none",
+                        data: pz6,
+                    },
+                    {
+                        name: "14㎛",
+                        type: "line",
+                        symbol: "none",
+                        data: pz14,
+                    },
+                    {
+                        name: "21㎛",
+                        type: "line",
+                        symbol: "none",
+                        data: pz21,
+                    },
+                ],
+            }), true, true);
+            window.addEventListener("resize", () => {
+                chartIns && chartIns.resize();
+            });
+        },
+        initBottomL1(owc = 0) {
+            const chartIns = echarts.init(document.getElementById("bottomL1"));
+            chartIns.setOption(
+                this.generateGaugeOption({
+                    color: ["0ec6c4", "0ec6c4"],
+                    bgColor: "aef1f5",
+                    name: "",
+                    value: parseInt(owc * 100),
+                    limit: 100,
+                    unit: "%",
+                }),
+                true,
+                true
+            );
+            window.addEventListener("resize", () => {
+                chartIns && chartIns.resize();
+            });
+        },
+        initBottomL2(ov = 0) {
+            const chartIns = echarts.init(document.getElementById("bottomL2"));
+            chartIns.setOption(
+                this.generateGaugeOption({
+                    color: ["1860b1", "1860b1"],
+                    bgColor: "c2d6ec",
+                    name: "",
+                    value: parseInt(ov * 100),
+                    limit: 100,
+                    unit: "CP",
+                }),
+                true,
+                true
+            );
+            window.addEventListener("resize", () => {
+                chartIns && chartIns.resize();
+            });
+        },
+        initBottomL3(oip = 0) {
+            const chartIns = echarts.init(document.getElementById("bottomL3"));
+            chartIns.setOption(
+                this.generateGaugeOption({
+                    color: ["f3c128", "f3c128"],
+                    bgColor: "f0eace",
+                    name: "",
+                    value: parseInt(oip * 100),
+                    limit: 100,
+                    unit: "Bar",
+                }),
+                true,
+                true
+            );
+            window.addEventListener("resize", () => {
+                chartIns && chartIns.resize();
+            });
+        },
+        initBottomR1(oip = 0) {
+            const chartIns = echarts.init(document.getElementById("bottomR1"));
+            chartIns.setOption(
+                this.generateGaugeOption({
+                    color: ["f3c128", "f3c128"],
+                    bgColor: "f0eace",
+                    name: "",
+                    value: parseInt(oip * 100),
+                    limit: 100,
+                    unit: "Bar",
+                }),
+                true,
+                true
+            );
+            window.addEventListener("resize", () => {
+                chartIns && chartIns.resize();
+            });
+        },
+        initBottomR2(ov = 0) {
+            const chartIns = echarts.init(document.getElementById("bottomR2"));
+            chartIns.setOption(
+                this.generateGaugeOption({
+                    color: ["1860b1", "1860b1"],
+                    bgColor: "c2d6ec",
+                    name: "",
+                    value: parseInt(ov * 100),
+                    limit: 100,
+                    unit: "CP",
+                }),
+                true,
+                true
+            );
+            window.addEventListener("resize", () => {
+                chartIns && chartIns.resize();
+            });
+        },
+        initBottomR3(owc = 0) {
+            const chartIns = echarts.init(document.getElementById("bottomR3"));
+            chartIns.setOption(
+                this.generateGaugeOption({
+                    color: ["0ec6c4", "0ec6c4"],
+                    bgColor: "aef1f5",
+                    name: "",
+                    value: parseInt(owc * 100),
+                    limit: 100,
+                    unit: "%",
+                }),
+                true,
+                true
+            );
+            window.addEventListener("resize", () => {
+                chartIns && chartIns.resize();
+            });
+        },
+        generateGaugeOption(
+            option = {
+                color: ["0DDF7A"],
+                bgColor: "fff",
+                name: "",
+                value: 0,
+                limit: 1,
+            }
+        ) {
+            return merge(
+                {
+                    series: [
+                        {
+                            type: "gauge",
+                            center: ["50%", "60%"],
+                            startAngle: 220,
+                            endAngle: -40,
+                            min: 0,
+                            max: option.limit,
+                            splitNumber: 12,
+                            progress: {
+                                show: true,
+                                width: 20,
+                                itemStyle: {
+                                    color: {
+                                        type: "linear",
+                                        x: 0.8,
+                                        y: 0,
+                                        x2: 0,
+                                        y2: 1,
+                                        colorStops: [
+                                            {
+                                                offset: 0,
+                                                color: "#" + option.color[1], // 0% 处的颜色
+                                            },
+                                            {
+                                                offset: 1,
+                                                color: "#" + option.color[0], // 100% 处的颜色
+                                            },
+                                        ],
+
+                                        global: false,
+                                    },
+                                },
+                            },
+                            pointer: {
+                                show: false,
+                            },
+                            axisLine: {
+                                lineStyle: {
+                                    width: 20,
+                                    color: [[1, "#" + option.bgColor]],
+                                },
+                            },
+                            axisTick: {
+                                distance: -30,
+                                splitNumber: 3,
+                                lineStyle: {
+                                    width: 1,
+                                    color: "#" + option.color[0],
+                                },
+                            },
+                            splitLine: {
+                                distance: -40,
+                                length: 10,
+                                lineStyle: {
+                                    width: 2,
+                                    color: "#" + option.color[0],
+                                },
+                            },
+                            axisLabel: {
+                                show: false,
+                            },
+                            anchor: {
+                                show: false,
+                            },
+                            title: {
+                                show: false,
+                                fontSize: 16,
+                                color: "#" + option.color[0],
+                                offsetCenter: [0, "100%"],
+                            },
+                            detail: {
+                                valueAnimation: true,
+                                width: "60%",
+                                offsetCenter: [0, 0],
+                                formatter: "{back| {value} }\n{unit|" + option.unit + "}",
+                                rich: {
+                                    back: {
+                                        fontSize: 20,
+                                        fontWeight: 700,
+                                        color: "#" + option.color[0],
+                                    },
+                                    unit: {
+                                        fontSize: 12,
+                                        fontWeight: 400,
+                                        color: "#" + option.color[0],
+                                    },
+                                },
+                            },
+                            data: [
+                                {
+                                    value: option.value,
+                                    name: option.name,
+                                },
+                            ],
+                        },
+                    ],
+                },
+                {},
+                (objVal, srcVal) => {
+                    if (isArray(objVal)) return srcVal;
+                }
+            );
+        },
+        generateOptions(option = {}) {
+            return merge(
+                {
+                    color: [
+                        "#306fff",
+                        "#30c9c9",
+                        "#f7ad08",
+                        "#93beff",
+                        "#80FFA5",
+                        "#00DDFF",
+                        "#37A2FF",
+                        "#FF0087",
+                        "#FFBF00",
+                        "#5470c6",
+                        "#91cc75",
+                        "#fac858",
+                        "#ee6666",
+                        "#73c0de",
+                        "#3ba272",
+                        "#fc8452",
+                        "#9a60b4",
+                        "#ea7ccc",
+                    ],
+                    tooltip: {
+                        show: true,
+                        trigger: "axis",
+                    },
+                    xAxis: {
+                        show: true,
+                        name: "",
+                        nameLocation: "end", // 坐标轴名称及显示位置，可以时start和middle
+                        nameTextStyle: {
+                            // 坐标轴名称的样式
+                            color: "#818181",
+                        },
+                        nameGap: 15, // 坐标轴名称与轴线的距离
+                        inverse: false, // 是否反向坐标轴
+                        axisLabel: {
+                            // 刻度标签的样式
+                            hideOverlap: true, // 隐藏重叠的标签
+                            color: "#818181",
+                        },
+                        axisLine: {
+                            show: true,
+                        },
+                        position: "bottom",
+                        offset: 0, // 相对正常位置的偏移
+                        type: "category", // 类目轴，也可以是time， value， 对数轴log
+                        data: [],
+                    },
+                    yAxis: {
+                        name: "",
+                        nameTextStyle: {
+                            // 坐标轴名称的样式
+                            color: "#818181",
+                        },
+                        axisLabel: {
+                            // 刻度标签的样式
+                            hideOverlap: true, // 隐藏重叠的标签
+                            color: "#818181",
+                        },
+                        axisLine: {
+                            show: false,
+                        },
+                        minorTick: {
+                            // 坐标轴刻度线相关配置
+                            show: false,
+                        },
+                        splitLine: {
+                            // 坐标轴在grid区域中的分割线
+                            show: true,
+                            lineStyle: {
+                                type: "dashed",
+                                color: "#818181",
+                            },
+                        },
+                    },
+                    legend: {
+                        show: true,
+                        // 图例配置
+                        orient: "horizontal", // horizontal水平布局， vertical垂直布局
+                        top: "20",
+                        right: "30",
+                        // backgroundColor: "#000000",
+                        // borderColor: "#ccc",
+                        // borderWidth: 0,
+                        padding: 5,
+                        itemGap: 10, // 各个item之间的距离
+                        itemWidth: 10, // 图例图形宽度
+                        itemHeight: 10, // 图例图形高度
+                        borderRadius: 10,
+                        textStyle: {
+                            color: "#d7d8db",
+                            fontSize: 9,
+                        },
+                        lineStyle: {
+                            type: "dotted",
+                            opacity: 0,
+                        },
+                    },
+                    grid: {
+                        left: "10%",
+                        top: "25%",
+                        right: "6%",
+                        bottom: "12%",
+                    },
+                },
+                option,
+                (objVal, srcVal) => {
+                    if (isArray(objVal)) return srcVal;
+                }
+            );
+        },
+        getDataResponse(params = []) {
+            return request({
+                url: "/ipc/dataShow/byPart/" + params.join(','),
+                method: "get"
+            });
         }
     }
 }
@@ -77,6 +709,7 @@ export default {
     font-family: 'BiaoTi';
     src: url(../../../assets/biaoti.ttf);
 }
+
 .bigscreen-outer-wrappeer {
     width: 100%;
     height: calc(100vh - 86px);
@@ -84,11 +717,13 @@ export default {
     background-size: 100% 100%;
     @include font_color(fontPrimary);
     padding: .6rem;
+
     .grid-main-wrapper {
         height: 100%;
         display: grid;
         grid-template-rows: 34% 33% 33%;
         grid-template-columns: repeat(4, 25%);
+
         .grid-item-wrapper {
             padding: .4rem;
         }
@@ -100,6 +735,7 @@ export default {
     height: 100%;
     display: flex;
     flex-direction: column;
+
     .card-big-title {
         width: 100%;
         height: 3.3rem;
@@ -111,6 +747,7 @@ export default {
         text-shadow: 2px 2px 2px #fff;
         @include background_bg(bigGridTitleBackgroundImage);
     }
+
     .big-car-title-bg {
         width: 100%;
         height: 2.4rem;
@@ -122,6 +759,7 @@ export default {
         background-size: 100% 100%;
         @include background_bg(subBigTitleBackgroundImage);
     }
+
     .card-sub-title {
         width: 100%;
         height: 2.4rem;
@@ -143,4 +781,39 @@ export default {
     background-repeat: no-repeat;
     background-position: center center;
 }
+
+.bottom-grid-wrapper {
+    display: grid;
+    height: 100%;
+    grid-template-columns: repeat(5, 1fr);
+
+    .bottom-grid-item {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 0 1.2rem;
+    }
+}
+
+.extra-bar-wrapper {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    padding-top: 1rem;
+    .extra-bar-item {
+        width: 2rem;
+        background-color: white;
+    }
+    .extra-bar-text {
+        background-color: #c1c1c142;
+        width: 2rem;
+        color: #eb1616;
+        font-family: 'BiaoTi';
+        display: flex;
+        align-items: center;
+        flex-direction: column-reverse;
+    }
+}
 </style>
\ No newline at end of file