Merge branch 'main' of http://117.73.11.115:3000/zhanghan11/tzipc

tzipc-ui/src/assets/styles/element-ui.scss

@@ -396,6 +396,9 @@ ul.el-dropdown-menu {
     border-color: #47cbfb;
     background: transparent;
   }
+  &__inner::after {
+    @include background_color(buttonActiveBackgroundColor);
+  }
 }
 
 .el-radio-group {
@@ -572,9 +575,9 @@ div.el-switch {
 
 //卡片
 .el-card {
-  background-color: transparent;
+  @include background_color(componentBackgroundColor);
-  color: #fff;
+  @include font_color(componentFontColor);
-  border-color: $shadow-split-line;
+  @include border_color(colorPrimary);
   .el-card__header {
     border-color: $shadow-split-line;
   }
@@ -662,22 +665,30 @@ div.el-transfer-panel {
 }
 //时间下拉框
 div.el-picker-panel {
-  background: linear-gradient(to bottom, #04152a, #0c1e53);
+  @include background_color(buttonBackgroundColor);
   border-color: $input-border-color;
-  color: #fff;
+  @include font_color(buttonFontColor);
   .el-date-table td.start-date span,
   .el-date-table td.end-date span {
     color: #0d246f;
     background: linear-gradient(to bottom, #fff, #97d6ff);
   }
   .el-date-table td.in-range div {
-    background-color: #0a3d74;
+    @include background_color(buttonActiveBackgroundColor);
+    @include font_color(buttonActiveFontColor);
   }
   .el-date-table th {
-    color: #fff;
+    @include font_color(componentFontColor);
     border-color: $input-border-color;
   }
 }
+.el-date-editor .el-range-input {
+  @include font_color(textComponentFontColor);
+}
+
+.el-range-input::placeholder {
+  @include font_color(textComponentFontColor);
+}
 
 /* //关于解决输入框背景颜色 */
 

tzipc-ui/src/theme/blueTheme/index.scss

@@ -23,6 +23,13 @@ $blueTheme: (
     mainContainerBackgroundColor: #eef3fb,
     dialogBackgroundImage: url(/theme/blueTheme/dialogBg.png),
 
+    // 大屏定制背景和颜色
+    bigGridItemBackgroundColor: #ffffff6a,
+    bigGridTitleBackgroundImage: url(/theme/blueTheme/bigTitleBg.png),
+    subTitleBackgroundImage: url(/theme/blueTheme/subTitleBg.png),
+    subBigTitleBackgroundImage: url(/theme/blueTheme/bigSubTitleBg.png),
+    deviceImage: url(/theme/blueTheme/device.png),
+
     // element ui 样式
     elTableHeaderBackgroundColor: #fff,
 );

tzipc-ui/src/theme/default/index.scss

@@ -23,6 +23,13 @@ $default: (
     mainContainerBackgroundColor: #001129,
     dialogBackgroundImage: url(/theme/default/dialogBg.png),
 
+    // 大屏定制背景和颜色
+    bigGridItemBackgroundColor: #08417967,
+    bigGridTitleBackgroundImage: url(/theme/default/bigTitleBg.png),
+    subTitleBackgroundImage: url(/theme/default/subTitleBg.png),
+    subBigTitleBackgroundImage: url(/theme/default/bigSubTitleBg.png),
+    deviceImage: url(/theme/default/device.png),
+
     // element ui 样式
     elTableHeaderBackgroundColor: #fff,
 );

tzipc-ui/src/theme/redTheme/index.scss

@@ -24,6 +24,13 @@ $redTheme: (
     topTitleBackgroundImage: url(/theme/redTheme/topTitleBg.png),
     dialogBackgroundImage: url(/theme/redTheme/dialogBg.png),
 
+    // 大屏定制背景和颜色
+    bigGridItemBackgroundColor: #ffffff8c,
+    bigGridTitleBackgroundImage: url(/theme/redTheme/bigTitleBg.png),
+    subTitleBackgroundImage: url(/theme/redTheme/subTitleBg.png),
+    subBigTitleBackgroundImage: url(/theme/redTheme/bigSubTitleBg.png),
+    deviceImage: url(/theme/redTheme/device.png),
+
     // element ui 样式
     elTableHeaderBackgroundColor: #fff,
 );

tzipc-ui/src/views/zf/bigscreen/index.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="bigscreen-outer-wrappeer">
+        <div class="grid-main-wrapper">
+            <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>
+            </div>
+            <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>
+            </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>
+            </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>
+            </div>
+            <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>
+            </div>
+            <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>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'BigScreen',
+    data() {
+        return {}
+    },
+    created() {
+        this.initBigScreen()
+    },
+    methods: {
+        initBigScreen() {
+            console.log('initBigScreen');
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import '@/theme/index.scss';
+
+@font-face {
+    font-family: 'BiaoTi';
+    src: url(../../../assets/biaoti.ttf);
+}
+.bigscreen-outer-wrappeer {
+    width: 100%;
+    height: calc(100vh - 86px);
+    @include background_bg(homeBackgroundImage);
+    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;
+        }
+    }
+}
+
+.card-item-wrapper {
+    @include background_color(bigGridItemBackgroundColor);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .card-big-title {
+        width: 100%;
+        height: 3.3rem;
+        font-family: 'BiaoTi';
+        text-align: center;
+        padding-top: .4rem;
+        font-size: 1.3rem;
+        background-size: 100% 100%;
+        text-shadow: 2px 2px 2px #fff;
+        @include background_bg(bigGridTitleBackgroundImage);
+    }
+    .big-car-title-bg {
+        width: 100%;
+        height: 2.4rem;
+        margin-top: .1rem;
+        font-family: 'BiaoTi';
+        font-size: 1rem;
+        padding-left: 3.4rem;
+        padding-top: .6rem;
+        background-size: 100% 100%;
+        @include background_bg(subBigTitleBackgroundImage);
+    }
+    .card-sub-title {
+        width: 100%;
+        height: 2.4rem;
+        margin-top: .1rem;
+        font-family: 'BiaoTi';
+        font-size: 1rem;
+        padding-left: 3.4rem;
+        padding-top: .6rem;
+        background-size: 100% 100%;
+        @include background_bg(subTitleBackgroundImage);
+    }
+}
+
+.device-image {
+    width: 100%;
+    height: 100%;
+    @include background_bg(deviceImage);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+</style>