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

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

@@ -136,7 +136,7 @@ export default {
       visibleNumber: 3,
       // 当前激活菜单的 index
       currentNav: 0,
-      value: localStorage.getItem("data-theme"),
+      value: localStorage.getItem("data-theme") || 'default',
       curTheme: 'default',
       themeOptions: [
         {
@@ -201,10 +201,10 @@ export default {
   mounted() {
     // console.log("storeState", this.$store.state);
     this.setVisibleNumber();
+    this.handleSwitchChange(this.value)
   },
   methods: {
     handleSwitchChange(val) {
-      console.log('switch value', val);
       const themeFilePathMap = {
         'default': '/theme/default/elementui/index.css',
         'redTheme': '/theme/redTheme/elementui/index.css',

tzipc-ui/src/layout/components/multiDropDown/index.vue

@@ -179,6 +179,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '@/theme/index.scss';
 .dropdown-item-more {
   position: relative;
   font-size: 14px;
@@ -206,9 +207,7 @@ export default {
     }
   }
   .dropdown-item-more-right {
-    // background: $--custom-dropdown-background;
+    @include background_color(buttonBackgroundColor);
-    background: linear-gradient(to bottom, #04132a, #112144);
-    // border: 1px solid #1dc4e7;
     border-radius: 6px;
     width: 100px;
     overflow: hidden;

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

@@ -12,6 +12,7 @@ $blueTheme: (
     buttonFontColor: #000,
     buttonActiveBackgroundColor:#013dac,
     buttonActiveFontColor: #fff,
+    tableRowBackgroundColor: #ffffffaa,
 
     // 定制颜色定制背景图
     basicBackgroundColor: #000000,

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

@@ -12,6 +12,7 @@ $default: (
     buttonFontColor: #7dabdc,
     buttonActiveBackgroundColor: #42b983,
     buttonActiveFontColor: #fff,
+    tableRowBackgroundColor: #000000b4,
 
     // 定制颜色定制背景图
     basicBackgroundColor: #000000,

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

@@ -12,6 +12,7 @@ $redTheme: (
     buttonFontColor: #000,
     buttonActiveBackgroundColor: #ad352f,
     buttonActiveFontColor: #fff,
+    tableRowBackgroundColor: #ffffffb5,
 
     // 定制颜色定制背景图
     basicBackgroundColor: #000000,

tzipc-ui/src/views/dataLog/index.vue

@@ -214,7 +214,7 @@ export default {
 <style lang="scss">
 @import '@/theme/index.scss';
 .color-row {
-  background-color: #0b2d57 !important;
+  @include background_color(tableRowBackgroundColor);
 }
 .header-row {
   background: linear-gradient(180deg, #0b2357 0%, #2094dc 48%, #0b2357 100%);

tzipc-ui/src/views/detection/cydg/list/index.vue

@@ -133,9 +133,10 @@ export default {
   },
 };
 </script>
-<style>
+<style lang="scss">
+@import '@/theme/index.scss';
 .color-row {
-  background-color: #0b2d57 !important;
+  @include background_color(tableRowBackgroundColor);
 }
 .header-row {
   background: linear-gradient(180deg, #0b2357 0%, #2094dc 48%, #0b2357 100%);

tzipc-ui/src/views/detection/zgdgBottom/list/index.vue

@@ -133,9 +133,10 @@ export default {
   },
 };
 </script>
-<style>
+<style lang="scss">
+@import '@/theme/index.scss';
 .color-row {
-  background-color: #0b2d57 !important;
+  @include background_color(tableRowBackgroundColor);
 }
 .header-row {
   background: linear-gradient(180deg, #0b2357 0%, #2094dc 48%, #0b2357 100%);

tzipc-ui/src/views/detection/zgdgTop/list/index.vue

@@ -133,9 +133,10 @@ export default {
   },
 };
 </script>
-<style>
+<style lang="scss">
+@import '@/theme/index.scss';
 .color-row {
-  background-color: #0b2d57 !important;
+  @include background_color(tableRowBackgroundColor);
 }
 .header-row {
   background: linear-gradient(180deg, #0b2357 0%, #2094dc 48%, #0b2357 100%);

tzipc-ui/src/views/ipc/dataLog/plcDataLog.vue

@@ -191,9 +191,9 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "@/theme/index.scss";
+@import '@/theme/index.scss';
 .color-row {
-  background-color: #67c7ff !important;
+  @include background_color(tableRowBackgroundColor);
 }
 .header-row {
   background: linear-gradient(180deg, #0b2357 0%, #2094dc 48%, #0b2357 100%);

tzipc-ui/src/views/ipc/dataLog/sensorDataLog.vue

@@ -149,9 +149,9 @@ export default {
 };
 </script>
 <style lang="scss">
-@import "@/theme/index.scss";
+@import '@/theme/index.scss';
 .color-row {
-  background-color: #67c7ff !important;
+  @include background_color(tableRowBackgroundColor);
 }
 .header-row {
   background: linear-gradient(180deg, #0b2357 0%, #2094dc 48%, #0b2357 100%);

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

@@ -3,17 +3,22 @@
         <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-big-title">{{ title1 }}数据监控</div>
                     <div class="card-sub-title">油膜轴承振动监测</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="device-image"></div>
+                <div class="device-image">
+                    <div @click="handleTypeChange(['rtd', 'rto'])"></div>
+                    <div @click="handleTypeChange(['rbd', 'rbo'])"></div>
+                    <div @click="handleTypeChange(['ftd', 'fto'])"></div>
+                    <div @click="handleTypeChange(['fbd', 'fbo'])"></div>
+                </div>
             </div>
             <div class="grid-item-wrapper">
                 <div class="card-item-wrapper">
-                    <div class="card-big-title">R上棍传动侧数据监控</div>
+                    <div class="card-big-title">{{ title2 }}数据监控</div>
                     <div class="card-sub-title">油膜轴承振动监测</div>
                     <div class="card-main-item-wrapper" id="chart2" style="height:calc(100% - 6.4rem);"></div>
                 </div>
@@ -136,51 +141,79 @@ export default {
             l2: 0,
 
             r1: 0,
-            r2: 0
+            r2: 0,
+
+            title1: '',
+            title2: '',
+
+            timer: null,
+            queryParams: ['rtd', 'rto']
         }
     },
     mounted() {
-        this.getDataResponse(['rtd', 'rto']).then(({ data }) => {
+        this.timer = setInterval(() => {
-            console.log('RREESS', data);
+            this.initData(this.queryParams)
-            const { drive, operation } = data;
+        }, 1000)
-            // 处理传动测数据
+        this.handleTypeChange(this.queryParams)
-            if (drive) {
+    },
-                const { xSensorData, vx, vy, vz } = drive;
+    beforeDestroy() {
-                this.initChart2(xSensorData, vx, vy, vz)
+        clearInterval(this.timer)
-
-                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: {
+        handleTypeChange(params) {
+            this.queryParams = params
+            const titleMap = {
+                'rtd': 'R上辊传动侧',
+                'rto': 'R上辊操作侧',
+                'rbd': 'R下辊传动侧',
+                'rbo': 'R下辊操作侧',
+                'ftd': 'F上辊传动侧',
+                'fto': 'F上辊操作侧',
+                'fbd': 'F下辊传动侧',
+                'fbo': 'F下辊操作侧'
+            }
+            this.title1 = titleMap[params[0]]
+            this.title2 = titleMap[params[1]]
+        },
+        initData(params = []) {
+            this.getDataResponse(params).then(({ 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
+                }
+            })
+        },
         initChart1(xAxis = [], vx, vy, vz) {
             const chartIns = echarts.init(document.getElementById("chart1"));
             chartIns.setOption(this.generateOptions({
@@ -780,6 +813,9 @@ export default {
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
 }
 
 .bottom-grid-wrapper {