feat: 淮海水利项目综合管控升级改造 大屏框架

god-ui/src/layout/components/Navbar.vue

@@ -150,6 +150,9 @@ export default {
         case '9190':
           this.$router.push("/bigscreen6")
           break;
+        case '9280':
+          this.$router.push("/bigscreen8")
+          break;
         default:
           this.$router.push('/bigscreen')
           break;

god-ui/src/router/index.js

@@ -111,6 +111,11 @@ export const constantRoutes = [
     component: () => import('@/views/bigscreen7/index.vue'),
     hidden: true
   },
+  {
+    path: '/bigscreen8',
+    component: () => import('@/views/bigscreen8/index.vue'),
+    hidden: true
+  },
   {
     path: '/waterhome',
     component: () => import('@/views/waterHome/index.vue'),

god-ui/src/views/bigscreen8/index.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="bigscreen8-wrapper bigscreen-main-wrapper">
+        <div class="header-main-wrapper">
+            <div class="header-left-part-wrapper"></div>
+            <div class="header-title-wrapper">淮海水利项目管理决策驾驶舱</div>
+            <div class="header-right-part-wrapper"></div>
+        </div>
+        <div class="content-main-wrapper content-grid-wrapper">
+            <div class="content-grid-item">
+                <div class="bigscreen-item-wrapper">
+                    <div class="bigscreen-item-title-extra">项目概览</div>
+                    <div class="bigscreen-item-content"></div>
+                </div>
+            </div>
+            
+            <div class="middle-map-wrapper" style="grid-row: span 3;">
+                <div class="top-cards-wrapper">
+                    <div class="top-card-item">
+                        <div class="top-card-icon"></div>
+                        <div class="top-text-inner"></div>
+                    </div>
+                </div>
+                <div id="middleMap"></div>
+            </div>
+            <div class="content-grid-item">
+                <div class="bigscreen-item-wrapper">
+                    <div class="bigscreen-item-title-extra"></div>
+                    <div class="bigscreen-item-content"></div>
+                </div>
+            </div>
+            <div class="content-grid-item">
+                <div class="bigscreen-item-wrapper">
+                    <div class="bigscreen-item-title-extra">项目分析</div>
+                    <div class="bigscreen-item-content" id="chart1"></div>
+                </div>
+            </div>
+            <div class="content-grid-item">
+                <div class="bigscreen-item-wrapper">
+                    <div class="bigscreen-item-title-extra">质量排名</div>
+                    <div class="bigscreen-item-content"></div>
+                </div>
+            </div>
+            <div class="content-grid-item">
+                <div class="bigscreen-item-wrapper">
+                    <div class="bigscreen-item-title-extra">中标率分析</div>
+                    <div class="bigscreen-item-content" id="chart2"></div>
+                </div>
+            </div>
+            
+            <div class="content-grid-item">
+                <div class="bigscreen-item-wrapper">
+                    <div class="bigscreen-item-title-extra">问题类型占比</div>
+                    <div class="bigscreen-item-content" id="chart3"></div>
+                </div>
+            </div>
+            
+        </div>
+        <div class="footer-main-wrapper"></div>
+    </div>
+</template>
+<script>
+import {
+    generateBaseOptions,
+    generatePieOptions,
+    initChartStatic,
+} from "@/utils/bigscreenTool/index.js";
+import * as echarts from 'echarts'
+
+export default {
+    mounted() {
+        this.initChart1();
+        this.initChart2();
+        this.initChart3();
+        this.initMiddleMap();
+    },
+    methods: {
+        initChart1() {},
+        initChart2() {},
+        initChart3() {},
+        initMiddleMap() {},
+    }
+}
+</script>
+<style scoped lang="scss">
+@import url(../../utils/bigscreenTool/index.scss);
+.bigscreen8-wrapper {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    mix-blend-mode: multiply;
+    background-image: url(./assets/bg.png);
+    background-size: 100% 100%;
+    .header-main-wrapper {
+        background-image: url(./assets/header.png);
+    }
+    .content-grid-wrapper {
+        display: grid;
+        grid-template-columns: 1fr 2fr 1fr;
+        grid-template-rows: 33.3% 33.3% 33.3%;
+        .content-grid-item {
+            padding: .4rem;
+            .bigscreen-item-wrapper {
+                background-image: url(./assets/itemBg.png);
+                background-size: 100% 100%;
+                .bigscreen-item-title-extra {
+                    height: 19% !important;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-family: "TitleFont";
+                    color: white;
+                }
+                .bigscreen-item-content {
+                    height: 81% !important;
+                }
+            }
+        }
+        .middle-map-wrapper {
+            position: relative;
+            #middleMap {
+                width: 100%;
+                height: 100%;
+                border: 1px solid yellow;
+            }
+            .top-cards-wrapper {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: absolute;
+                top: 2rem;
+                width: 100%;
+                border: 1px solid white;
+                .top-card-item {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    .top-card-icon {
+                        width: 3rem;
+                        height: 3rem;
+                        background-size: 100% 100%;
+                        border: 1px solid red;
+                    }
+                    .top-text-inner {
+                        display: flex;
+                        flex-direction: column;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>