feat：日历组件支持联动组件功能

report-ui/src/views/bigscreenDesigner/designer/linkageLogic.js

@@ -22,6 +22,11 @@ export const lickageParamsConfig = [
     code: 'widget-form-time',
     paramsKey: ['startTime','endTime']
   },
+  {
+    name: '日历',
+    code: 'widget-calendar',
+    paramsKey: ['date']
+  },
   {
     name: '柱图',
     code: 'widget-barchart',

report-ui/src/views/bigscreenDesigner/designer/tools/configure/texts/widget-calendar.js

@@ -112,6 +112,21 @@ export const widgetCalendar = {
               required: false,
               placeholder: '',
               value: 'rgb(0, 0, 0)'
+            },{
+              type: 'vue-color',
+              label: '选中背景色',
+              name: 'selectedBackground',
+              required: false,
+              placeholder: '',
+              value: 'rgb(11, 180, 241)'
+            },
+            {
+              type: 'vue-color',
+              label: '选中文字颜色',
+              name: 'selectedTextColor',
+              required: false,
+              placeholder: '',
+              value: 'rgb(0, 0, 0)'
             },
             {
               type: 'el-switch',
@@ -123,7 +138,19 @@ export const widgetCalendar = {
             },
           ]
         }
-      ]
+      ],
+      [{
+        name: '组件联动',
+        list: [
+          {
+            type: 'componentLinkage',
+            label: '',
+            name: 'componentLinkage',
+            required: false,
+            value: []
+          }
+        ]
+      }]
     ],
     data: [
       {

report-ui/src/views/bigscreenDesigner/designer/widget/texts/widgetCalendar.vue

@@ -18,9 +18,11 @@
           :class="{
             'out-of-range': day.isOutOfRange,
             'current-month': day.isCurrentMonth,
-            'today': day.isToday
+            'today': day.isToday,
+            'selected': day.date === selectDayStr
           }"
-          :style="cellStyle(day.isToday)"
+          :style="cellStyle(day.isToday, day.date === selectDayStr)"
+          @click="selectDay(day)"
         >
           <slot name="day" :day="day">
             <div class="day-number">{{ day.day }}</div>
@@ -34,13 +36,17 @@
 
 <script>
 import moment from 'moment'
-import { targetWidgetLinkageLogic } from "@/views/bigscreenDesigner/designer/linkageLogic";
+import { targetWidgetLinkageLogic, originWidgetLinkageLogic } from "@/views/bigscreenDesigner/designer/linkageLogic";
 
 export default {
   name: 'widgetCalendar',
   props: {
     value: Object,
     ispreview: Boolean,
+    widgetIndex: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -49,11 +55,12 @@ export default {
       startDate: moment().format('YYYY-MM-DD'),
       endDate: moment().format('YYYY-MM-DD'),
       options: {},
-      optionsSetUp: {},
+      optionsSetup: {},
       optionsPosition: {},
       optionsData: {},
 
-      text: ''
+      text: '',
+      selectDayStr: moment().format('YYYY-MM-DD')
     }
   },
   computed: {
@@ -64,7 +71,7 @@ export default {
       return moment(this.endDate, 'YYYY-MM-DD').endOf('day')
     },
     showButton () {
-      return this.optionsSetUp.isButton;
+      return this.optionsSetup.isButton;
     },
     styleObj() {
       const allStyle = this.optionsPosition;
@@ -74,33 +81,33 @@ export default {
         height: allStyle.height + "px",
         left: allStyle.left + "px",
         top: allStyle.top + "px",
-        background: this.optionsSetUp.tableBgColor,
-        borderColor: this.optionsSetUp.borderColor
+        background: this.optionsSetup.tableBgColor,
+        borderColor: this.optionsSetup.borderColor
       };
     },
     headerStyle () {
       return {
-        background: this.optionsSetUp.headerBackground,
-        color: this.optionsSetUp.headerTextColor,
-        justifyContent: this.optionsSetUp.isButton ? 'space-between' : 'center'
+        background: this.optionsSetup.headerBackground,
+        color: this.optionsSetup.headerTextColor,
+        justifyContent: this.optionsSetup.isButton ? 'space-between' : 'center'
 
       };
     },
     headerBtnStyle () {
       return {
-        background: this.optionsSetUp.headerBtnBackground,
-        color: this.optionsSetUp.headerBtnTextColor
+        background: this.optionsSetup.headerBtnBackground,
+        color: this.optionsSetup.headerBtnTextColor
       };
     },
     weekStyle () {
       return {
-        background: this.optionsSetUp.weekBackground,
-        color: this.optionsSetUp.weekTextColor
+        background: this.optionsSetup.weekBackground,
+        color: this.optionsSetup.weekTextColor
       };
     },
     dayStyle () {
       return {
-        backgroundColor: this.optionsSetUp.borderColor
+        backgroundColor: this.optionsSetup.borderColor
       }
     },
     currentMonthTitle() {
@@ -138,13 +145,16 @@ export default {
       }
       
       return days
-    }
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
   },
   watch: {
     value: {
       handler(val) {
         this.options = val;
-        this.optionsSetUp = val.setup;
+        this.optionsSetup = val.setup;
         this.optionsPosition = val.position;
         this.optionsData = val.data;
         this.setOptionsData();
@@ -154,13 +164,21 @@ export default {
   },
   mounted() {
     this.options = this.value;
-    this.optionsSetUp = this.value.setup;
+    this.optionsSetup = this.value.setup;
     this.optionsPosition = this.value.position;
     this.optionsData = this.value.data;
     targetWidgetLinkageLogic(this);
     this.setOptionsData();
   },
   methods: {
+    selectDay (data) {
+      this.selectDayStr = data.date
+      const formTimeData = {}
+      formTimeData['date'] = data.date
+      originWidgetLinkageLogic(this, true, {
+        currentData: formTimeData,
+      }); // 联动-源组件逻辑
+    },
     // 数据解析
     setOptionsData(e, paramsConfig) {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
@@ -214,10 +232,17 @@ export default {
         this.$forceUpdate();
       });
     },
-    cellStyle (isToday) {
-      return {
-        backgroundColor: isToday ? this.optionsSetUp.todayBackground : this.optionsSetUp.dayBackground,
-        color: isToday ? this.optionsSetUp.todayTextColor : this.optionsSetUp.dayTextColor,
+    cellStyle (isToday, isSelected) {
+      if (isSelected) {
+        return {
+          backgroundColor: this.optionsSetup.selectedBackground,
+          color: this.optionsSetup.selectedTextColor,
+        }
+      } else {
+        return {
+          backgroundColor: isToday ? this.optionsSetup.todayBackground : this.optionsSetup.dayBackground,
+          color: isToday ? this.optionsSetup.todayTextColor : this.optionsSetup.dayTextColor,
+        }
       }
     },
     prevMonth() {
@@ -329,6 +354,7 @@ export default {
   width: calc(100% - 0px);
   display: flex;
   flex-direction: column;
+  cursor: pointer;
 }
 
 /* 当前月份的日期 */
@@ -337,6 +363,10 @@ export default {
   color: #ffffff;
 }
 
+.day-cell.selected {
+  background-color: rgb(11, 180, 241);
+}
+
 /* 非当前月份的日期 */
 .day-cell:not(.current-month) {
  background-color: rgba(0, 59, 81, .5);