Merge branch 'main' into tab20260208

src/views/bigscreenDesigner/designer/components/dynamicForm.vue

@@ -13,8 +13,10 @@
           <el-form-item
             v-if="
               inputShow[item.name] &&
+              item.type != 'el-collapse'&&
               item.type != 'dycustComponents' &&
-              item.type != 'dynamic-add-table'
+              item.type != 'dynamic-add-table'&&
+              (item.name != 'is_drill_drown' || hideDrill === false)
             "
             :label="item.label"
             :prop="item.name"
@@ -173,6 +175,15 @@
               </span>
             </el-dialog>
           </el-form-item>
+          <el-collapse   v-if="inputShow[item.name] && item.type === 'el-collapse'">
+              <el-collapse-item
+                class="collapseItem1" 
+                :title="item.label"
+                @click.prevent.native="handleCollapse"
+                :name="item.label"
+                >
+              </el-collapse-item>
+          </el-collapse>
           <dynamicComponents
             v-if="item.type == 'dycustComponents' && inputShow[item.name]"
             v-model="formData[item.name]"
@@ -336,6 +347,7 @@
 <script>
 import ColorPicker from "./colorPicker.vue";
 import vueJsonEditor from "vue-json-editor";
+
 import "codemirror/lib/codemirror.css"; // 核心样式
 import "codemirror/theme/cobalt.css"; // 引入主题后还需要在 options 中指定主题才会生效
 // language
@@ -354,7 +366,7 @@ import componentLinkage from './componentLinkage';
 import imageSelect from './imageSelect';
 import multiIframeManager from './multiIframeManager.vue';
 export default {
-  name: "DynamicForm",
+  name: "dynamic-form",
   components: {
     imageSelect,
     ColorPicker,
@@ -390,6 +402,10 @@ export default {
     widgetIndex: {
       type: Number,
       default: -1
+    },
+    hideDrill:{
+      type: Boolean,
+      default:false,
     }
   },
   data() {
@@ -399,6 +415,8 @@ export default {
       dialogVisibleStaticData: false,
       methodsVisible: false,
       validationRules: "",
+     
+   
       optionsJavascript: {
         mode: "text/javascript",
         tabSize: 2, // 缩进格式
@@ -416,6 +434,7 @@ export default {
     value(newValue, oldValue) {
       this.formData = newValue || {};
     },
+    
     options(val) {
       this.setDefaultValue();
       this.isShowData();
@@ -427,6 +446,12 @@ export default {
   },
   mounted() {},
   methods: {
+    handleCollapse(){
+      this.$emit('handleCollapse',this.formData)
+    },
+    changeDrillData(val){
+      this.changed(val, 'drill_drown_setting')
+    },
     onJsonChange(val) {
       console.log(val);
     },
@@ -442,7 +467,6 @@ export default {
       } else {
         this.$set(this.formData, key, val);
       }
-
       this.$emit("onChanged", this.formData);
       // key为当前用户操作的表单组件
       for (let i = 0; i < this.options.length; i++) {
@@ -465,6 +489,7 @@ export default {
     handleClose() {
       this.dialogVisibleStaticData = false;
       this.methodsVisible = false;
+     
     },
     // 组件属性 数据是否展示动态还是静态数据
     isShowData() {
@@ -480,8 +505,10 @@ export default {
         }
       }
       data.forEach((el) => {
-        if (el.relactiveDomValue != currentData.value) {
+        if (el.relactiveDomValue != currentData.value&&el.name!=='drill_drown_setting') {
           this.inputShow[el.name] = false;
+        }else if(el.name==='drill_drown_setting'){
+          this.inputShow[el.name] = el.relactiveDomValue == this.formData[el.relactiveDom];
         }
       });
     },
@@ -494,6 +521,7 @@ export default {
             this.formData[this.options[i].name] = this.deepClone(
               this.options[i].value
             );
+     
           } else if (Object.prototype.toString.call(obj) == "[object Array]") {
             for (let j = 0; j < obj.length; j++) {
               const list = obj[j].list;
@@ -515,6 +543,12 @@ export default {
 </script>
 
 <style lang="scss">
+.dialogDrillDrown.el-dialog__wrapper .el-dialog{
+  .el-dialog__body{
+    max-height:calc(100vh - 60px) !important;
+    overflow-y:hidden !important;
+  }
+}
 .el-form-item {
   margin-bottom: 5px;
 }
@@ -547,4 +581,9 @@ export default {
   background: transparent;
   padding-bottom: 0;
 }
+.collapseItem1 .el-collapse-item__arrow.is-active{
+  cursor:pointer;
+  color: #bcc9d4;
+  transform:rotate(0)
+}
 </style>

src/views/bigscreenDesigner/designer/index.vue

@@ -312,11 +312,12 @@
           label="配置"
         >
           <dynamicForm
-            ref="formData"
+            ref="formData1"
             :options="widgetOptions.setup"
             :layer-widget="layerWidget"
             :widget-index="widgetIndex"
             :widget-params-config="widgetParamsConfig"
+            @handleCollapse="handleCollapse"
             @onChanged="(val) => widgetValueChanged('setup', val)"
           />
           <!-- 如果当前选中的是 Tabs 内部子组件，在配置表单底部显示删除按钮 -->
@@ -364,7 +365,15 @@
         </el-tab-pane>
       </el-tabs>
     </div>
+     <el-dialog
+       title="下钻配置"
+       :visible.sync="dialogVisibleDrillDrown"
+       width="100%"
+       class="dialogDrillDrown"
+     >
       
+       <drill-drown-setting @submitDrillDrownData="submitDrillDrownData" :screenData="screenData"></drill-drown-setting>
+     </el-dialog>
     <content-menu
       :visible.sync="visibleContentMenu"
       :style-obj="styleObj"
@@ -389,7 +398,7 @@ import dynamicForm from "./components/dynamicForm.vue";
 import draggable from "vuedraggable";
 import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件
 import contentMenu from "./components/contentMenu";
-
+import DrillDrownSetting from "./components/drillDrownSetting";
 export default {
   name: "Login",
   components: {
@@ -398,11 +407,13 @@ export default {
     widget,
     dynamicForm,
     contentMenu,
+    DrillDrownSetting
   },
   mixins: [mixin],
   data() {
     return {
       grade: false,
+      dialogVisibleDrillDrown:false,
       layerWidget: [],
       widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
       widthLeftForTools: 200, // 左侧工具栏宽度
@@ -410,7 +421,10 @@ export default {
       widthLeftForOptions: 300, // 右侧属性配置区
       widthPaddingTools: 18,
       toolIsShow: true, // 左侧工具栏是否显示
-
+      screenData:{
+        dashboard: {  },
+        widgets: []
+      },
       bigscreenWidth: 1920, // 大屏设计的大小
       bigscreenHeight: 1080,
 
@@ -518,6 +532,14 @@ export default {
     });
   },
   methods: {
+    submitDrillDrownData(data){
+      this.dialogVisibleDrillDrown=false
+      this.$refs.formData1.changeDrillData(data)
+    },
+    handleCollapse(val){
+      this.dialogVisibleDrillDrown=true
+      this.screenData=val.drill_drown_setting?val.drill_drown_setting:this.screenData
+    },
     // 获取图层数据
     getLayerData(val) {
       const layerWidgetArr = [];
@@ -530,6 +552,7 @@ export default {
         if (val[i].value.paramsKeys) {
           obj.paramsKeys = val[i].value.paramsKeys;
         }
+
         const options = val[i].options["setup"];
         options.forEach((el) => {
           if (el.name == "layerName") {
@@ -661,6 +684,7 @@ export default {
         options: tool.options,
       };
       // 处理默认值
+      console.log(widgetType)
       const widgetJsonValue = this.getWidgetConfigValue(widgetJson);
 
       widgetJsonValue.value.position.left =
@@ -683,7 +707,6 @@ export default {
         widgetJson.value.position
       );
       this.setWidgetConfigValue(widgetJson.options.data, widgetJson.value.data);
-
       return widgetJson;
     },
     setWidgetConfigValue(config, configValue) {

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

@@ -70,6 +70,24 @@ export const widgetImage = {
         required: false,
         placeholder: '',
       },
+      {
+        type: 'el-switch',
+        label: '开启下钻',
+        name: 'is_drill_drown',
+        required: false,
+        placeholder: '',
+        value: false,
+      },
+       {
+        type: 'el-collapse',
+        label: '下钻配置',
+        name: 'drill_drown_setting',
+        relactiveDom:'is_drill_drown',
+        relactiveDomValue:true,
+        required: false,
+        placeholder: '',
+        value:''
+      },
     ],
     // 数据
     data: [],

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

@@ -150,6 +150,24 @@ export const widgetText = {
         placeholder: '',
         value: false,
       },
+      {
+        type: 'el-switch',
+        label: '开启下钻',
+        name: 'is_drill_drown',
+        required: false,
+        placeholder: '',
+        value: false,
+      },
+      {
+        type: 'el-collapse',
+        label: '下钻配置',
+        name: 'drill_drown_setting',
+        relactiveDom:'is_drill_drown',
+        relactiveDomValue:true,
+        required: false,
+        placeholder: '',
+        value:''
+      },
       [
         {
           name: '自定义样式设置',

src/views/bigscreenDesigner/designer/widget/form/widgetFormTime old.vue

@@ -0,0 +1,179 @@
+<!--
+ * @Author: qianlishi qianlishi@anji-plus.com
+ * @Date: 2023-03-06 15:38:10
+ * @LastEditors: qianlishi qianlishi@anji-plus.com
+ * @LastEditTime: 2023-04-20 13:54:57
+-->
+<template>
+  <el-date-picker
+    :style="styleObj"
+    v-model="timeValue"
+    :value-format="valueFormat"
+    :picker-options="datetimeRangePickerOptions"
+    :type="dateType"
+    @[eventChange]="change"
+  />
+</template>
+<script>
+import {
+  originWidgetLinkageLogic,
+  targetWidgetLinkageLogic,
+} from "@/views/bigscreenDesigner/designer/linkageLogic";
+import miment from 'miment'
+
+export default {
+  name: "WidgetFormTime",
+  props: {
+    value: Object,
+    ispreview: Boolean,
+    widgetIndex: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      timeValue: "",
+      optionsStyle: {},
+      optionsData: {},
+      optionsSetup: {},
+      //日期时间快捷选项
+      datetimeRangePickerOptions: {
+        shortcuts: [{
+          text: '今天',
+          onClick(picker) {
+            const start = new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0));
+            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '昨天',
+          onClick(picker) {
+            const start = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0));
+            const end = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(23, 59, 59, 999));
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一周',
+          onClick(picker) {
+            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
+            const start = new Date(new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
+            start.setTime(miment().add(-6, 'DD').stamp());
+            new Date(start.setHours(0, 0, 0, 0));
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一个月',
+          onClick(picker) {
+            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
+            const start = new Date();
+            start.setTime(miment().add(-1, 'MM').stamp());
+            new Date(start.setHours(0, 0, 0, 0));
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
+            const start = new Date();
+            start.setTime(miment().add(-3, 'MM').stamp());
+            new Date(start.setHours(0, 0, 0, 0));
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近半年',
+          onClick(picker) {
+            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
+            const start = new Date();
+            start.setTime(miment().add(-6, 'MM').stamp());
+            new Date(start.setHours(0, 0, 0, 0));
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近一年',
+          onClick(picker) {
+            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
+            const start = new Date();
+            start.setTime(miment().add(-1, 'YY').stamp());
+            new Date(start.setHours(0, 0, 0, 0));
+            picker.$emit('pick', [start, end]);
+          }
+        }],
+        // disabledDate(time){
+        //   return time.getTime() > Date.now()
+        // }
+      }
+    };
+  },
+  computed: {
+    styleObj() {
+      return {
+        position: this.ispreview ? "absolute" : "static",
+        width: this.optionsStyle.width + "px",
+        height: this.optionsStyle.height + "px",
+        left: this.optionsStyle.left + "px",
+        top: this.optionsStyle.top + "px",
+        background: this.optionsSetup.select_background,
+      };
+    },
+    eventChange() {
+      return "change";
+    },
+    dateType() {
+      return this.optionsSetup.dateType || 'datetimerange';
+    },
+    valueFormat() {
+      return this.dateType === 'daterange' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss';
+    },
+    allComponentLinkage() {
+      return this.$store.state.designer.allComponentLinkage;
+    },
+  },
+  watch: {
+    value: {
+      handler(val) {
+        this.optionsSetup = val.setup;
+        this.optionsData = val.data;
+        this.optionsStyle = val.position;
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.optionsSetup = this.value.setup;
+    this.optionsData = this.value.data;
+    this.optionsStyle = this.value.position;
+
+    targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
+  },
+  methods: {
+    change(event) {
+      const formTimeData = {}
+      formTimeData['startTime'] = event[0]  //startTime
+      formTimeData['endTime'] = event[1] //endTime
+      originWidgetLinkageLogic(this, true, {
+        currentData: formTimeData,
+      }); // 联动-源组件逻辑
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+  .el-select {
+  height: 100%;
+
+  .el-input {
+    height: 100%;
+
+    .el-input__inner {
+      height: 100%;
+      background: inherit;
+      color: inherit;
+
+      &::placeholder {
+        color: inherit;
+      }
+    }
+  }
+}
+</style>

src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue

@@ -5,14 +5,26 @@
  * @LastEditTime: 2023-04-20 13:54:57
 -->
 <template>
+  <div class="pickWrap">
+
   <el-date-picker
+  class="start-picker date-picker"
   :style="styleObj"
-    v-model="timeValue"
+  v-model="startTime"
   :value-format="valueFormat"
-    :picker-options="datetimeRangePickerOptions"
+  :type="dateType=='datetimerange'?'datetime':'date'"
-    :type="dateType"
   @[eventChange]="change"
   />
+
+  <el-date-picker
+  class="date-picker"
+  :style="{...styleObj,left:styleObj.leftEnd,width:styleObj.widthEnd}"
+  v-model="endTime"
+  :value-format="valueFormat"
+  :type="dateType=='datetimerange'?'datetime':'date'"
+  @[eventChange]="change"
+  />
+  </div>
 </template>
 <script>
 import {
@@ -33,85 +45,23 @@ export default {
   },
   data() {
     return {
-      timeValue: "",
       optionsStyle: {},
       optionsData: {},
       optionsSetup: {},
-      //日期时间快捷选项
+      endTime:null,
-      datetimeRangePickerOptions: {
+      startTime:null,
-        shortcuts: [{
+
-          text: '今天',
-          onClick(picker) {
-            const start = new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0));
-            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '昨天',
-          onClick(picker) {
-            const start = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0));
-            const end = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(23, 59, 59, 999));
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
-            const start = new Date(new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
-            start.setTime(miment().add(-6, 'DD').stamp());
-            new Date(start.setHours(0, 0, 0, 0));
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近一个月',
-          onClick(picker) {
-            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
-            const start = new Date();
-            start.setTime(miment().add(-1, 'MM').stamp());
-            new Date(start.setHours(0, 0, 0, 0));
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近三个月',
-          onClick(picker) {
-            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
-            const start = new Date();
-            start.setTime(miment().add(-3, 'MM').stamp());
-            new Date(start.setHours(0, 0, 0, 0));
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近半年',
-          onClick(picker) {
-            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
-            const start = new Date();
-            start.setTime(miment().add(-6, 'MM').stamp());
-            new Date(start.setHours(0, 0, 0, 0));
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '最近一年',
-          onClick(picker) {
-            const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
-            const start = new Date();
-            start.setTime(miment().add(-1, 'YY').stamp());
-            new Date(start.setHours(0, 0, 0, 0));
-            picker.$emit('pick', [start, end]);
-          }
-        }],
-        // disabledDate(time){
-        //   return time.getTime() > Date.now()
-        // }
-      }
     };
   },
   computed: {
     styleObj() {
       return {
         position: this.ispreview ? "absolute" : "static",
-        width: this.optionsStyle.width + "px",
+        width: this.optionsStyle.width/2+12 + "px",
+        widthEnd: this.optionsStyle.width/2-12 + "px",
         height: this.optionsStyle.height + "px",
         left: this.optionsStyle.left + "px",
+        leftEnd: this.optionsStyle.left+this.optionsStyle.width/2+12 + "px",
         top: this.optionsStyle.top + "px",
         background: this.optionsSetup.select_background,
       };
@@ -149,8 +99,8 @@ export default {
   methods: {
     change(event) {
       const formTimeData = {}
-      formTimeData['startTime'] = event[0]  //startTime
+      formTimeData['startTime'] = this.startTime //event[0]  //startTime
-      formTimeData['endTime'] = event[1] //endTime
+      formTimeData['endTime'] = this.endTime //event[1] //endTime
       originWidgetLinkageLogic(this, true, {
         currentData: formTimeData,
       }); // 联动-源组件逻辑
@@ -159,21 +109,20 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-  .el-select {
+.start-picker{
-  height: 100%;
+    display:flex;
-
+    &:after{
-  .el-input {
+        content:'-';
-    height: 100%;
+        width:24px;
-
+        transform:translate(7px,5px)
-    .el-input__inner {
-      height: 100%;
-      background: inherit;
-      color: inherit;
-
-      &::placeholder {
-        color: inherit;
     }
 }
+.pickWrap{
+    display:flex;
+   &::v-deep() {
+    .el-input__prefix{
+      height:28px;
+    }
 }
    }
 </style>

src/views/bigscreenDesigner/designer/widget/temp.vue

@@ -5,6 +5,7 @@
       :value="value"
       :ispreview="true"
       :widget-index="index"
+      @oepnTheDrillView="$emit('oepnTheDrillView',$event)"
     />
   </div>
 </template>
@@ -58,7 +59,6 @@ import widgetChinaMap from "./map/widgetChinaMap.vue";
 import widgetGlobalMap from "./map/widgetGlobalMap.vue";
 import widgetBarStackMoreShowChart from "./bar/widgetBarStackMoreShowChart.vue";
 import widgetBarLineSingleChart from "./barline/widgetBarLineSingleChart.vue";
-
 export default {
   name: "WidgetTemp",
   components: {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="imagebox" :style="styleColor">
+  <div class="imagebox" :style="styleColor"  @click="handleClick" >
     <img
       :class="transStyle.startRotate ? 'startImg' : ''"
       :style="imgStyle"
@@ -18,7 +18,8 @@ export default {
   },
   data() {
     return {
-      options: {}
+      options: {},
+      optionsSetup:{}
     };
   },
   computed: {
@@ -50,15 +51,26 @@ export default {
     value: {
       handler(val) {
         this.options = val;
+        this.optionsSetup = val.setup;
       },
       deep: true
     }
   },
   created() {
     this.options = this.value;
+     this.optionsSetup = this.value.setup;
   },
-  mounted() {},
+  mounted() {
-  methods: {}
+
+  },
+  methods: {
+    handleClick(){
+      console.log(this.optionsSetup)
+      if(!!this.optionsSetup.is_drill_drown){
+        this.$emit('oepnTheDrillView',this.optionsSetup.drill_drown_setting)
+      }
+    },
+  }
 };
 </script>
 

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

@@ -5,7 +5,7 @@
  * @Last Modified time: 2022-3-14 14:04:24
  !-->
  <template>
-  <div class="text" :style="computedStyleColor">{{ styleColor.text }}</div>
+  <div class="text" @click="handleClick" :style="computedStyleColor">{{ styleColor.text }}</div>
 </template>
 <script>
 import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
@@ -84,6 +84,11 @@ export default {
     this.setOptionsData();
   },
   methods: {
+    handleClick(){
+      if(!!this.optionsSetup.is_drill_drown){
+        this.$emit('oepnTheDrillView',this.optionsSetup.drill_drown_setting)
+      }
+    },
     // 根据条件应用样式
     getConditionalStyle() {
       const setup = this.optionsSetup || {};

src/views/bigscreenDesigner/viewer/drillDrownView.vue

@@ -0,0 +1,159 @@
+<!--
+ * @Descripttion: 大屏设计器 -- 预览
+ * @Author: Devli
+ * @Date: 2021-3-13 11:04:24
+ * @Last Modified by:   Raod
+ * @Last Modified time: 2022-5-6 11:04:24
+ !-->
+<template>
+  <div class="layout drillDrownViewLayout">
+    <div :style="bigScreenStyle">
+      <widget
+        v-for="(widget, index) in widgets"
+        :key="index"
+        v-model="widget.value"
+        :index="index"
+        :type="widget.type"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import widget from "../designer/widget/temp";
+import { detailDashboard } from "@/api/bigscreen";
+export default {
+  name: "Login",
+  components: {
+    widget
+  },
+  
+  data() {
+    return {
+      bigScreenStyle: {},
+      dashboard:{},
+      widgets: [],
+      viewData:{}
+    };
+  },
+  props:{
+    screenData:{
+      type:Object,
+      default:()=>{
+        return {
+           dashboard: {  },
+           widgets: []
+        }
+      }
+    }
+  },
+  watch: {
+    screenData: {
+      handler(val) {
+        this.viewData=val
+        this.getData();
+      },
+      deep: true,
+      immediate:true
+    }
+  },
+  mounted() {
+    this.viewData=this.screenData
+    this.getData();
+    window.onresize=this.Debounce(this.setScale,500);
+  },
+  methods: {
+    async getData() {
+      const data = {dashboard:{...this.viewData.dashboard,...this.viewData},widgets:null};
+      this.dashboard=data.dashboard||{};
+      const equipment = document.body.clientWidth;
+      const ratioEquipment = equipment / data.dashboard.width;
+      this.bigScreenStyle = {
+        width: data.dashboard.width + "px",
+        height: data.dashboard.height + "px",
+        "background-color": data.dashboard.backgroundColor,
+        "background-image": "url(" + data.dashboard.backgroundImage + ")",
+        "background-position": "0% 0%",
+        "background-size": "100% 100%",
+        "background-repeat": "initial",
+        "background-attachment": "initial",
+        "background-origin": "initial",
+        "background-clip": "initial",
+        transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
+        "transform-origin": "0 0"
+      };
+      data.dashboard.widgets.forEach((item, index) => {
+        item.value.widgetId = item.value.setup.widgetId
+        item.value.widgetCode = item.value.setup.widgetCode
+        if (item.value.setup.componentLinkage && item.value.setup.componentLinkage.length) {
+          this.$store.commit('SET_ALL_COMPONENT_LINKAGE', {
+            index,
+            widgetId: item.value.widgetId,
+            linkageArr: item.value.setup.componentLinkage
+          })
+        }
+      })
+      this.widgets = data.dashboard.widgets;
+
+      // 定时刷新
+      if(data.dashboard.refreshSeconds>0) {
+        setTimeout(function(){ window.location.reload(); }, data.dashboard.refreshSeconds*1000);
+      }
+    },
+    Debounce:(fn,t)=>{
+      const delay=t||500;
+      let timer=null;
+      return(...args)=>{
+        if(timer){
+          clearTimeout(timer);
+        }
+        const context=this
+        timer=setTimeout(()=>{
+          fn.apply(context,args);
+        },delay);
+      }
+    },
+    setScale(){
+      const scale=this.getScale();
+      this.bigScreenStyle.transform='scale('+scale.scalex+','+scale.scaley+')'
+    },
+    getScale(){
+      let width = this.dashboard.width
+      let height = this.dashboard.height
+      // 固定宽度比例
+      const scalex = window.innerWidth / width
+      // 高度按相同比例缩放，但允许超出屏幕高度
+      const scaley = scalex
+      return {
+        scalex,
+        scaley
+      }
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+
+.layout {
+  width: 100%;
+  text-align: center;
+}
+.drillDrownViewLayout{
+  min-height: calc(100vh - 34px) !important;
+  overflow-y:auto !important;
+  &::-webkit-scrollbar {
+    display: none; /* 隐藏滚动条 */
+  }
+}
+.bottom-text {
+  width: 100%;
+  color: #a0a0a0;
+  position: fixed;
+  bottom: 16px;
+  z-index: 9999;
+}
+.drillDrownViewLayout{
+    
+}
+</style>

src/views/bigscreenDesigner/viewer/index.vue

@@ -14,24 +14,39 @@
         v-model="widget.value"
         :index="index"
         :type="widget.type"
+        @oepnTheDrillView="oepnTheDrillView"
       />
     </div>
+    <el-dialog 
+      :title="''"
+       class="dialogDrillDrown dialogDrillDrownView" :visible.sync="visiableDrillView">
+    <drill-drown-view :screenData="screenData"></drill-drown-view>
+  </el-dialog>
   </div>
+
 </template>
 
 <script>
 import widget from "../designer/widget/temp";
+import DrillDrownView from "./drillDrownView";
+
 import { detailDashboard } from "@/api/bigscreen";
 export default {
   name: "Login",
   components: {
-    widget
+    widget,
+    DrillDrownView
   },
   data() {
     return {
       bigScreenStyle: {},
+      dashboard:{},
+      widgets: [],
+      screenData:{
           dashboard: {  },
           widgets: []
+      },
+      visiableDrillView:false
     };
   },
   mounted() {
@@ -39,6 +54,10 @@ export default {
     window.onresize=this.Debounce(this.setScale,500);
   },
   methods: {
+    oepnTheDrillView(val){
+      this.screenData=val
+      this.visiableDrillView=true
+    },
     async getData() {
       const reportCode = this.$route.query.reportCode;
       const { code, data } = await detailDashboard(reportCode);
@@ -114,8 +133,24 @@ export default {
 <style lang="scss">
 .layout {
   width: 100%;
-  height: 100%;
+  height: auto;
   text-align: center;
+  overflow:hidden
+}
+.dialogDrillDrownView .el-dialog{
+  width:auto;
+  margin-top:0 !important;
+  .el-dialog__body{
+    padding:0;
+    max-height:calc(100vh - 34px);
+    overflow:auto;
+    &::-webkit-scrollbar {
+      display: none; /* 隐藏滚动条 */
+      }
+  }
+   .el-dialog__header .el-dialog__headerbtn{
+  top: 6px;
+}
 }
 .bottom-text {
   width: 100%;