feat: 组态编辑页面调整

src/views/scada/topo/components/data-panel/index.vue

@@ -19,7 +19,7 @@
                     </template>
                     <!-- 本地图片 -->
                     <template v-else-if="item.type === 'static' && item.icon">
-                        <img class="icon" :src="require('@/assets/topo-img/' + item.icon)" />
+                        <img class="icon white-icon" :src="require('@/assets/topo-img/' + item.icon)" />
                         <span class="text">{{ item.text }}</span>
                     </template>
                     <!-- 网络图片 -->
@@ -110,6 +110,7 @@ export default {
             .icon {
                 width: 28px;
                 height: 28px;
+                color: white;
             }
 
             .text {
@@ -121,6 +122,7 @@ export default {
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
+              color: white;
             }
         }
 
@@ -146,4 +148,7 @@ export default {
         }
     }
 }
+.white-icon {
+  filter: brightness(0) invert(1);
+}
 </style>

src/views/scada/topo/components/topoToolbox.vue

@@ -2,16 +2,16 @@
     <el-tabs v-model="tabsActiveName" tab-position="left" class="topo-toolbox" @tab-click="handleTabsClick">
         <el-tab-pane name="1">
             <div slot="label" class="tab-item">
-                <img v-if="tabsActiveName === '1'" width="24" height="24" src="@/assets/topo-img/images/edit_basic_active.png" />
-                <img v-else width="24" height="24" src="@/assets/topo-img/images/edit_basic_disable.png" />
+                <img  v-if="tabsActiveName === '1'" width="24" height="24" src="@/assets/topo-img/images/edit_basic_active.png" />
+                <img class="white-icon" v-else width="24" height="24" src="@/assets/topo-img/images/edit_basic_disable.png" />
                 <span class="name" :class="{ active: tabsActiveName === '1' }">{{ $t('topo.topoToolbox.250932-0') }}</span>
             </div>
             <data-panel :data="jsonBase" />
         </el-tab-pane>
         <el-tab-pane name="2">
             <div slot="label" class="tab-item">
-                <img v-if="tabsActiveName === '2'" width="24" height="24" src="@/assets/topo-img/images/edit_shape_active.png" />
-                <img v-else width="24" height="24" src="@/assets/topo-img/images/edit_shape_disable.png" />
+                <img  v-if="tabsActiveName === '2'" width="24" height="24" src="@/assets/topo-img/images/edit_shape_active.png" />
+                <img class="white-icon" v-else width="24" height="24" src="@/assets/topo-img/images/edit_shape_disable.png" />
                 <span class="name" :class="{ active: tabsActiveName === '2' }">{{ $t('topo.topoToolbox.250932-1') }}</span>
             </div>
             <data-panel :data="jsonShape" />
@@ -19,15 +19,15 @@
         <el-tab-pane name="3">
             <div slot="label" class="tab-item">
                 <img v-if="tabsActiveName === '3'" width="24" height="24" src="@/assets/topo-img/images/edit_static_active.png" />
-                <img v-else width="24" height="24" src="@/assets/topo-img/images/edit_static_disable.png" />
+                <img class="white-icon"  v-else width="24" height="24" src="@/assets/topo-img/images/edit_static_disable.png" />
                 <span class="name" :class="{ active: tabsActiveName === '3' }">{{ $t('topo.topoToolbox.250932-2') }}</span>
             </div>
             <data-panel :data="jsonChart" />
         </el-tab-pane>
         <el-tab-pane name="4">
             <div slot="label" class="tab-item">
-                <img v-if="tabsActiveName === '4'" width="24" height="24" src="@/assets/topo-img/images/edit_gallery_active.png" />
-                <img v-else width="24" height="24" src="@/assets/topo-img/images/edit_gallery_disable.png" />
+                <img  v-if="tabsActiveName === '4'" width="24" height="24" src="@/assets/topo-img/images/edit_gallery_active.png" />
+                <img class="white-icon" v-else width="24" height="24" src="@/assets/topo-img/images/edit_gallery_disable.png" />
                 <span class="name" :class="{ active: tabsActiveName === '4' }">{{ $t('topo.topoToolbox.250932-3') }}</span>
             </div>
             <el-menu unique-opened @open="handleGalleryOpen">
@@ -41,8 +41,8 @@
         </el-tab-pane>
         <el-tab-pane name="5">
             <div slot="label" class="tab-item">
-                <img v-if="tabsActiveName === '5'" width="24" height="24" src="@/assets/topo-img/images/edit_chart_active.png" />
-                <img v-else width="24" height="24" src="@/assets/topo-img/images/edit_chart_disable.png" />
+                <img  v-if="tabsActiveName === '5'" width="24" height="24" src="@/assets/topo-img/images/edit_chart_active.png" />
+                <img class="white-icon" v-else width="24" height="24" src="@/assets/topo-img/images/edit_chart_disable.png" />
                 <span class="name" :class="{ active: tabsActiveName === '5' }">{{ $t('topo.topoToolbox.250932-4') }}</span>
             </div>
             <el-menu unique-opened @open="handleEchartOpen">
@@ -56,8 +56,8 @@
         </el-tab-pane>
         <el-tab-pane name="6">
             <div slot="label" class="tab-item">
-                <img v-if="tabsActiveName === '6'" width="24" height="24" src="@/assets/topo-img/images/edit_more_active.png" />
-                <img v-else width="24" height="24" src="@/assets/topo-img/images/edit_more_disable.png" />
+                <img  v-if="tabsActiveName === '6'" width="24" height="24" src="@/assets/topo-img/images/edit_more_active.png" />
+                <img class="white-icon" v-else width="24" height="24" src="@/assets/topo-img/images/edit_more_disable.png" />
                 <span class="name" :class="{ active: tabsActiveName === '6' }">{{ $t('topo.topoToolbox.250932-5') }}</span>
             </div>
             <data-panel v-loading="loading" element-loading-background="transparent" :data="components" />
@@ -391,7 +391,8 @@ export default {
 
     ::v-deep .el-tabs__header {
         margin: 0;
-        background: #f2f3f4;
+        background: #222b3c;
+        border-right: 1px solid white;
 
         .el-tabs__item {
             height: 88px;
@@ -405,7 +406,7 @@ export default {
 
                 .name {
                     font-size: 14px;
-                    color: #323232;
+                    color: white;
                     line-height: 24px;
                 }
             }
@@ -440,4 +441,7 @@ export default {
         }
     }
 }
+.white-icon {
+  filter: brightness(0) invert(1);
+}
 </style>

src/views/scada/topo/editor.vue

@@ -5,33 +5,33 @@
                 <div class="left-wrap">
                     <el-button type="text" @click="handelClick(3)">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_copy.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_copy.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-0') }}</span>
                         </div>
                     </el-button>
                     <el-button type="text" @click="handelClick(4)">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_delete.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_delete.png" />
                             <span class="name">{{ $t('del') }}</span>
                         </div>
                     </el-button>
                     <el-divider direction="vertical"></el-divider>
                     <el-button type="text" @click="handelClick(13)">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_top.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_top.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-1') }}</span>
                         </div>
                     </el-button>
                     <el-button type="text" @click="handelClick(14)">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_bottom.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_bottom.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-2') }}</span>
                         </div>
                     </el-button>
                     <el-dropdown class="ml10" @command="handleCommand">
                         <el-button type="text">
                             <div class="btn-wrap">
-                                <img width="24" height="24" src="@/assets/topo-img/images/editor_revolve.png" />
+                                <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_revolve.png" />
                                 <span class="name">{{ $t('scada.topo.editor.023345-3') }}</span>
                             </div>
                         </el-button>
@@ -46,7 +46,7 @@
                     <el-dropdown class="ml10" @command="handleCommandAlign">
                         <el-button type="text">
                             <div class="btn-wrap">
-                                <img width="24" height="24" src="@/assets/topo-img/images/editor_align.png" />
+                                <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_align.png" />
                                 <span class="name">{{ $t('scada.topo.editor.023345-9') }}</span>
                             </div>
                         </el-button>
@@ -64,7 +64,7 @@
                     <el-dropdown class="ml10" @command="handleCommandMakeUP">
                         <el-button type="text">
                             <div class="btn-wrap">
-                                <img width="24" height="24" src="@/assets/topo-img/images/editor_combination.png" />
+                                <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_combination.png" />
                                 <span class="name">{{ $t('scada.topo.editor.023345-16') }}</span>
                             </div>
                         </el-button>
@@ -76,52 +76,52 @@
                     <el-divider direction="vertical"></el-divider>
                     <el-button v-if="isLock" type="text" @click="handleLock($t('scada.topo.editor.023345-18'))">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_unlock.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_unlock.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-18') }}</span>
                         </div>
                     </el-button>
                     <el-button v-else type="text" @click="handleLock($t('scada.topo.editor.023345-19'))">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_lock.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_lock.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-19') }}</span>
                         </div>
                     </el-button>
                     <el-divider direction="vertical"></el-divider>
                     <el-button type="text" @click="handelClick(6)">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_gallery.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_gallery.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-20') }}</span>
                         </div>
                     </el-button>
                     <el-button v-if="scadaType == 3" type="text" @click="handelClick(8)">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_device_binding.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_device_binding.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-21') }}</span>
                         </div>
                     </el-button>
                     <el-divider direction="vertical"></el-divider>
                     <el-button type="text" @click="handelClick(18)">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_import.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_import.png" />
                             <span class="name">{{ $t('import') }}</span>
                         </div>
                     </el-button>
                     <el-button type="text" @click="handelClick(19)">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_export.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_export.png" />
                             <span class="name">{{ $t('export') }}</span>
                         </div>
                     </el-button>
                     <el-divider direction="vertical"></el-divider>
                     <el-button type="text" @click="handelClick(16)" :disabled="isRevoke">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_quash.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_quash.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-22') }}</span>
                         </div>
                     </el-button>
                     <el-button type="text" @click="handelClick(17)" :disabled="isRecovery">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_reflesh.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_reflesh.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-23') }}</span>
                         </div>
                     </el-button>
@@ -129,7 +129,7 @@
                     <el-dropdown class="ml10" @command="handleCommandZoom">
                         <el-button type="text">
                             <span class="btn-wrap">
-                                <i style="color: #303133; height: 20px; font-weight: 550" size="100">{{ zoom }}%</i>
+                                <i style="color: white; height: 20px; font-weight: 550" size="100">{{ zoom }}%</i>
                                 <span class="name">{{ $t('scada.topo.editor.023345-24') }}</span>
                             </span>
                         </el-button>
@@ -149,25 +149,25 @@
                     <el-tag v-if="!isSave" style="margin-right: 20px" type="danger" size="small">{{ $t('scada.topo.editor.023345-43') }}</el-tag>
                     <el-button type="text" @click="handelClick(1)" v-hasPermi="['scada:center:edit']">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_save.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_save.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-42') }}</span>
                         </div>
                     </el-button>
                     <el-button type="text" @click="handelClick(2)" v-hasPermi="['scada:center:preview']">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_preview.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_preview.png" />
                             <span class="name">{{ $t('preview') }}</span>
                         </div>
                     </el-button>
                     <el-button type="text" @click="handelClick(20)" v-hasPermi="['scada:center:share']">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_share.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_share.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-40') }}</span>
                         </div>
                     </el-button>
                     <el-button type="text" @click="handelHelpClick">
                         <div class="btn-wrap">
-                            <img width="24" height="24" src="@/assets/topo-img/images/editor_help.png" />
+                            <img class="white-icon" width="24" height="24" src="@/assets/topo-img/images/editor_help.png" />
                             <span class="name">{{ $t('scada.topo.editor.023345-25') }}</span>
                         </div>
                     </el-button>
@@ -553,7 +553,7 @@ export default {
             flex-direction: row;
             justify-content: space-between;
             align-items: center;
-            background: #ffffff;
+            background: #222b3c;
             border-bottom: 1px solid #dcdfe6;
 
             ::v-deep .el-button {
@@ -584,7 +584,7 @@ export default {
                     .name {
                         font-weight: 400;
                         font-size: 14px;
-                        color: #323232;
+                        color: #ffffff;
                         line-height: 22px;
                     }
                 }
@@ -594,7 +594,10 @@ export default {
         .aside-wrap {
             margin-bottom: 0;
             padding: 0;
-            background: #ffffff;
+            background: #222b3c;
+            img {
+
+            }
         }
 
         .left-aside-open {
@@ -675,5 +678,9 @@ export default {
     ::-webkit-scrollbar-track {
         background-color: #fff;
     }
+
+}
+.white-icon {
+  filter: brightness(0) invert(1);
 }
 </style>