加阅读模式

src/views/bigscreenDesigner/designer/tools/configure/texts/widget-table.js

@@ -342,6 +342,24 @@ export const widgetTable = {
           placeholder: '',
           value:''
         },
+        {
+          type: 'el-switch',
+          label: '阅读模式',
+          name: 'is_read_mode',
+          required: false,
+          placeholder: '',
+          value: false,
+        },
+        {
+          type: 'vue-color',
+          label: '阅读模式颜色',
+          name: 'read_color',
+          relactiveDom:'is_read_mode',
+          relactiveDomValue:true,
+          required: false,
+          placeholder: '',
+          value:''
+        },
       {
         type: 'dynamic-add-table',
         label: '',

src/views/bigscreenDesigner/designer/widget/texts/widgetTable.vue

@@ -16,7 +16,7 @@
       <!--数据-->
       <div class="bd"  @click="handleClick">
         <ul class="infoList">
-          <li v-for="(item, index) in list" :key="index" :style="tableRowHeight()">
+          <li v-for="(item, index) in list" :key="index"  :style="tableRowHeight()">
             <div 
                  v-if="isIndex"
                  :style="[
@@ -27,12 +27,13 @@
             >
               {{ index + 1 }}
             </div>
-            <div v-for="(itemChild, idx) in header"
+            <div @mouseenter="handleMouseSeen(index, idx)" @mouseleave="handleMouseLeave" v-for="(itemChild, idx) in header"
                  :key="idx"
                  :style="[
                 bodyTableStyle,
                 bodyTable(index),
                 tableFiledWidth(idx),
+                tableReadColor(index, idx),
                 tableRowHeight()
               ]"
             >
@@ -114,6 +115,7 @@ export default {
       },
       header: [],
       list: [],
+      hoverIndex: {},
       optionsSetUp: {},
       optionsPosition: {},
       optionsData: {},
@@ -257,6 +259,12 @@ export default {
     window.removeEventListener('resize', this.handleResize);
   },
   methods: {
+    handleMouseSeen(index, idx){
+      this.hoverIndex = {index, idx}
+    },
+    handleMouseLeave(){
+      this.hoverIndex = {}
+    },
     handleClick(){
       if(!!this.optionsSetUp.is_drill_drown){
         this.$emit('oepnTheDrillView',this.optionsSetUp.drill_drown_setting)
@@ -365,6 +373,13 @@ export default {
       }
       return styleJson;
     },
+    tableReadColor(index, idx){
+      let styleJson = {};
+      if (this.optionsSetUp.is_read_mode && (this.hoverIndex.index === index || this.hoverIndex.idx === idx)) {
+        styleJson["background-color"] = this.optionsSetUp.read_color;
+      }
+      return styleJson;
+    },
     // 添加的方法 - 设备类型检测
     checkDeviceType() {
       this.screenWidth = window.innerWidth;