大屏 图层

report-ui/src/components/Dictionary/index.vue

@@ -6,57 +6,68 @@
  */
 !-->
 <template>
-  <el-select v-model="dictionary" placeholder="请选择" clearable @change="selectChange">
-    <el-option v-for="item in dictionaryOptions" :key="item.id" :label="item.text" :value="item.id" />
+  <el-select
+    v-model="dictionary"
+    placeholder="请选择"
+    clearable
+    @change="selectChange"
+    size="mini"
+  >
+    <el-option
+      v-for="item in dictionaryOptions"
+      :key="item.id"
+      :label="item.text"
+      :value="item.id"
+    />
   </el-select>
 </template>
 
 <script>
-import { getDictList } from '@/api/dict-data' // 获取数据字典
+import { getDictList } from "@/api/dict-data"; // 获取数据字典
 export default {
-  name: 'GetDictionary',
+  name: "GetDictionary",
   props: {
     dictKey: String, // 字典code
-    updataDict: String, // 回显绑定的值
+    updataDict: String // 回显绑定的值
   },
   data() {
     return {
-      dictionary: '', // 绑定选中的值
-      dictionaryOptions: [], // 拉下字典选项
-    }
+      dictionary: "", // 绑定选中的值
+      dictionaryOptions: [] // 拉下字典选项
+    };
   },
   watch: {
     dictKey: {
       immediate: true,
       handler() {
-        this.getSystem()
-      },
+        this.getSystem();
+      }
     },
     updataDict: {
       immediate: true,
       handler() {
-        this.dictionary = this.updataDict
-      },
-    },
+        this.dictionary = this.updataDict;
+      }
+    }
   },
   created() {
-    this.getSystem()
+    this.getSystem();
   },
   mounted() {
-    this.dictionary = this.updataDict
+    this.dictionary = this.updataDict;
   },
   methods: {
     // 获取数据字典
     async getSystem() {
-      const { code, data } = await getDictList(this.dictKey)
-      if (code != '200') return
-      this.dictionaryOptions = data
+      const { code, data } = await getDictList(this.dictKey);
+      if (code != "200") return;
+      this.dictionaryOptions = data;
     },
     selectChange(val) {
-      this.$emit('input', val)
-    },
-  },
-}
+      this.$emit("input", val);
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

report-ui/src/views/report/bigscreen/designer/form/customColorComponents.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
-    <el-button type="primary" icon="el-icon-plus" plain @click="handleAddClick"
+    <el-button
+      type="primary"
+      size="mini"
+      icon="el-icon-plus"
+      plain
+      @click="handleAddClick"
       >新增</el-button
     >
     <el-table :data="formData" style="width: 100%">
@@ -43,19 +48,23 @@
             v-model="colorValue"
             style="width: 200px"
             placeholder="请输入颜色"
+            size="mini"
           >
             <template slot="append">
               <el-color-picker
                 v-model="colorValue"
                 :predefine="predefineColors"
+                size="mini"
               />
             </template>
           </el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible = false">取 消</el-button>
-        <el-button type="primary" @click="handleSaveClick">确 定</el-button>
+        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="handleSaveClick"
+          >确 定</el-button
+        >
       </span>
     </el-dialog>
   </div>

report-ui/src/views/report/bigscreen/designer/form/dynamicComponents.vue

@@ -1,193 +1,213 @@
 <template>
   <div>
-    <el-form label-width="80px"
-             label-position="left">
+    <el-form label-width="80px" label-position="left">
       <el-form-item label="数据集">
-        <el-select v-model="dataSetValue"
-                   clearable
-                   placeholder="请选择"
-                   @change="selectDataSet">
-          <el-option v-for="item in dataSet"
-                     :key="item.code"
-                     :label="item.setName"
-                     :value="item.id" />
+        <el-select
+          size="mini"
+          v-model="dataSetValue"
+          clearable
+          placeholder="请选择"
+          @change="selectDataSet"
+        >
+          <el-option
+            v-for="item in dataSet"
+            :key="item.code"
+            :label="item.setName"
+            :value="item.id"
+          />
         </el-select>
       </el-form-item>
-      <el-form-item v-for="(item, index) in userNameList"
-                    :key="index"
-                    :label="item.paramName">
-        <el-input v-model="item.sampleItem" />
+      <el-form-item
+        v-for="(item, index) in userNameList"
+        :key="index"
+        :label="item.paramName"
+      >
+        <el-input v-model="item.sampleItem" size="mini" />
       </el-form-item>
-      <el-form-item v-for="item in setParamList"
-                    :key="item"
-                    :label="item">
-        <Dictionary v-model="params"
-                    :dict-key="'CHART_PROPERTIES'"
-                    @input="selectParams($event, item)" />
+      <el-form-item v-for="item in setParamList" :key="item" :label="item">
+        <Dictionary
+          v-model="params"
+          :dict-key="'CHART_PROPERTIES'"
+          @input="selectParams($event, item)"
+        />
       </el-form-item>
-      <el-button style="width: 100%"
-                 type="primary"
-                 plain
-                 @click="saveDataBtn">刷新</el-button>
+      <el-button
+        style="width: 100%"
+        type="primary"
+        plain
+        size="mini"
+        @click="saveDataBtn"
+        >刷新</el-button
+      >
     </el-form>
   </div>
 </template>
 <script>
-import { queryAllDataSet, detailBysetId, getData } from '@/api/bigscreen'
-import Dictionary from '@/components/Dictionary/index'
+import { queryAllDataSet, detailBysetId, getData } from "@/api/bigscreen";
+import Dictionary from "@/components/Dictionary/index";
 
 export default {
-  name: 'DynamicComponents',
+  name: "DynamicComponents",
   components: {
-    Dictionary,
+    Dictionary
   },
   model: {
-    prop: 'formData',
-    event: 'input',
+    prop: "formData",
+    event: "input"
   },
   props: {
     chartType: String,
-    props: ['formData'],
+    props: ["formData"]
   },
-  data () {
+  data() {
     return {
-      dataSetValue: '',
+      dataSetValue: "",
       dataSet: [], // 数据集
       userNameList: [], // 用户
       setParamList: [], // 对应的不同的图形数据参数
       params: {},
-      chartProperties: {},
-    }
+      chartProperties: {}
+    };
   },
   computed: {
-    setCode () {
-      let code = ''
-      this.dataSet.forEach((el) => {
+    setCode() {
+      let code = "";
+      this.dataSet.forEach(el => {
         if (el.id == this.dataSetValue) {
-          code = el.setCode
+          code = el.setCode;
         }
-      })
-      return code
-    },
+      });
+      return code;
+    }
   },
-  mounted () {
-    this.loadDataSet()
+  mounted() {
+    this.loadDataSet();
   },
   methods: {
-    async loadDataSet () {
-      const { code, data } = await queryAllDataSet()
-      this.dataSet = data
-      if (code != '200') return
+    async loadDataSet() {
+      const { code, data } = await queryAllDataSet();
+      this.dataSet = data;
+      if (code != "200") return;
     },
-    async selectDataSet () {
-      const { code, data } = await detailBysetId(this.dataSetValue)
-      this.userNameList = data.dataSetParamDtoList
-      this.setParamList = data.setParamList
-      if (code != '200') return
+    async selectDataSet() {
+      const { code, data } = await detailBysetId(this.dataSetValue);
+      this.userNameList = data.dataSetParamDtoList;
+      this.setParamList = data.setParamList;
+      if (code != "200") return;
     },
-    async saveDataBtn () {
-      const contextData = {}
+    async saveDataBtn() {
+      const contextData = {};
       for (let i = 0; i < this.userNameList.length; i++) {
-        contextData[this.userNameList[i].paramName] = this.userNameList[i].sampleItem
+        contextData[this.userNameList[i].paramName] = this.userNameList[
+          i
+        ].sampleItem;
       }
       const params = {
         chartType: this.chartType,
         setCode: this.setCode,
         chartProperties: this.chartProperties,
-        contextData,
-      }
-      const { code, data } = await getData(params)
-      const analysisData = this.analysisChartsData(data)
-      console.log(analysisData)
-      this.$emit('input', analysisData)
-      if (code != '200') return
+        contextData
+      };
+      const { code, data } = await getData(params);
+      const analysisData = this.analysisChartsData(data);
+      console.log(analysisData);
+      this.$emit("input", analysisData);
+      if (code != "200") return;
     },
-    selectParams (val, key) {
-      this.chartProperties[key] = val
+    selectParams(val, key) {
+      this.chartProperties[key] = val;
     },
     // 解析不同图标的数据
-    analysisChartsData (data) {
+    analysisChartsData(data) {
       // widget-barchart 柱线图、widget-linechart 折线图、 widget-barlinechart 柱线图、widget-piechart 饼图、widget-hollow-piechart 空心饼图
       // widget-funnel 漏斗图  widget-gauge 仪表盘
-      const chartType = this.chartType
-      if (chartType == 'widget-barchart' || chartType == 'widget-linechart' || chartType == 'widget-barlinechart') {
-        return this.barOrLineChartFn(data)
-      } else if (chartType == 'widget-piechart' || chartType == 'widget-hollow-piechart' || chartType == 'widget-funnel') {
-        return this.piechartFn(data)
-      } else if (chartType == 'widget-gauge') {
-        return this.gaugeFn(data)
+      const chartType = this.chartType;
+      if (
+        chartType == "widget-barchart" ||
+        chartType == "widget-linechart" ||
+        chartType == "widget-barlinechart"
+      ) {
+        return this.barOrLineChartFn(data);
+      } else if (
+        chartType == "widget-piechart" ||
+        chartType == "widget-hollow-piechart" ||
+        chartType == "widget-funnel"
+      ) {
+        return this.piechartFn(data);
+      } else if (chartType == "widget-gauge") {
+        return this.gaugeFn(data);
       } else {
       }
     },
     // 柱状图、折线图、折柱图
-    barOrLineChartFn (data) {
-      const ananysicData = {}
-      const xAxisList = []
-      const series = []
+    barOrLineChartFn(data) {
+      const ananysicData = {};
+      const xAxisList = [];
+      const series = [];
       for (const key in this.chartProperties) {
-        const obj = {}
-        const seriesData = []
-        const value = this.chartProperties[key]
-        obj['type'] = value
+        const obj = {};
+        const seriesData = [];
+        const value = this.chartProperties[key];
+        obj["type"] = value;
         for (let i = 0; i < data.length; i++) {
-          if (value.startsWith('xAxis')) {
+          if (value.startsWith("xAxis")) {
             // 代表为x轴
-            xAxisList[i] = data[i][key]
+            xAxisList[i] = data[i][key];
           } else {
             // 其他的均为series展示数据
-            seriesData[i] = data[i][key]
+            seriesData[i] = data[i][key];
           }
         }
-        obj['data'] = seriesData
-        if (!obj['type'].startsWith('xAxis')) {
-          series.push(obj)
+        obj["data"] = seriesData;
+        if (!obj["type"].startsWith("xAxis")) {
+          series.push(obj);
         }
       }
-      ananysicData['xAxis'] = xAxisList
-      ananysicData['series'] = series
+      ananysicData["xAxis"] = xAxisList;
+      ananysicData["series"] = series;
       // console.log(ananysicData, '结果数据')
-      return ananysicData
+      return ananysicData;
     },
 
     // 饼图或者空心饼图或者漏斗图
-    piechartFn (data) {
-      const ananysicData = []
+    piechartFn(data) {
+      const ananysicData = [];
       for (let i = 0; i < data.length; i++) {
-        const obj = {}
+        const obj = {};
         for (const key in this.chartProperties) {
-          const value = this.chartProperties[key]
-          if (value === 'name') {
-            obj['name'] = data[i][key]
+          const value = this.chartProperties[key];
+          if (value === "name") {
+            obj["name"] = data[i][key];
           } else {
-            obj['value'] = data[i][key]
+            obj["value"] = data[i][key];
           }
         }
-        ananysicData.push(obj)
+        ananysicData.push(obj);
       }
       // console.log(ananysicData, '结果数据')
-      return ananysicData
+      return ananysicData;
     },
-    gaugeFn (data) {
-      const ananysicData = []
+    gaugeFn(data) {
+      const ananysicData = [];
       for (let i = 0; i < data.length; i++) {
-        const obj = {}
+        const obj = {};
         for (const key in this.chartProperties) {
-          const value = this.chartProperties[key]
-          if (value === 'name') {
-            obj['name'] = data[i][key]
+          const value = this.chartProperties[key];
+          if (value === "name") {
+            obj["name"] = data[i][key];
           } else {
-            obj['value'] = data[i][key]
+            obj["value"] = data[i][key];
           }
         }
-        if (!obj['unit']) {
-          obj['unit'] = '%'
+        if (!obj["unit"]) {
+          obj["unit"] = "%";
         }
-        ananysicData.push(obj)
+        ananysicData.push(obj);
       }
       // console.log(ananysicData, '结果数据')
-      return ananysicData[0]
-    },
-  },
-}
+      return ananysicData[0];
+    }
+  }
+};
 </script>
 <style lang="sass" scoped></style>

report-ui/src/views/report/bigscreen/designer/form/dynamicForm.vue

@@ -104,6 +104,7 @@
             <el-button
               v-if="item.type == 'el-button'"
               type="primary"
+              size="mini"
               plain
               @click="addStaticData"
               >编辑</el-button
@@ -311,12 +312,6 @@ export default {
       this.setDefaultValue();
       this.isShowData();
     }
-    // formData: {
-    //   handler () {
-    //     this.$emit('onChanged', this.formData)
-    //   },
-    //   deep: true,
-    // },
   },
   created() {
     this.isShowData();

report-ui/src/views/report/bigscreen/designer/index.vue

@@ -34,6 +34,8 @@
             v-for="(item, index) in layerWidget"
             :key="index"
             class="tools-item"
+            :class="widgetIndex == index ? 'is-active' : ''"
+            @click="layerClick(index)"
           >
             <span class="tools-item-icon">
               <i class="iconfont" :class="item.icon"></i>
@@ -123,7 +125,7 @@
               :bigscreen="{ bigscreenWidth, bigscreenHeight }"
               @onActivated="setOptionsOnClickWidget"
               @contextmenu.prevent.native="rightClick($event, index)"
-              @click.prevent.native="widgetsClick(index)"
+              @mousedown.prevent.native="widgetsClick(index)"
             />
           </div>
         </vue-ruler-tool>
@@ -197,6 +199,7 @@ export default {
   },
   data() {
     return {
+      layerWidget: [],
       widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
       widthLeftForTools: 200, // 左侧工具栏宽度
       widthLeftForToolsHideButton: 15, // 左侧工具栏折叠按钮宽度
@@ -292,13 +295,14 @@ export default {
     },
     bigscreenHeightInWorkbench() {
       return this.getPXUnderScale(this.bigscreenHeight);
-    },
-    layerWidget() {
-      const layerWidgetArr = [];
-      for (let i = 0; i < this.widgets.length; i++) {
-        layerWidgetArr.push(getToolByCode(this.widgets[i].type));
-      }
-      return layerWidgetArr;
+    }
+  },
+  watch: {
+    widgets: {
+      handler(val) {
+        this.handlerLayerWidget(val);
+      },
+      deep: true
     }
   },
   mounted() {
@@ -310,6 +314,22 @@ export default {
     this.widgets = [];
   },
   methods: {
+    handlerLayerWidget(val) {
+      const layerWidgetArr = [];
+      for (let i = 0; i < val.length; i++) {
+        console.log(getToolByCode(val[i].type));
+        const obj = {};
+        obj.icon = getToolByCode(val[i].type).icon;
+        const options = val[i].options["setup"];
+        options.forEach(el => {
+          if (el.name == "layerName") {
+            obj.label = el.value;
+          }
+        });
+        layerWidgetArr.push(obj);
+      }
+      this.layerWidget = layerWidgetArr;
+    },
     async initEchartData() {
       const reportCode = this.$route.query.reportCode;
       const { code, data } = await detailDashboard(reportCode);
@@ -512,7 +532,10 @@ export default {
       }
       return widgetJson;
     },
-
+    layerClick(index) {
+      this.widgetIndex = index;
+      this.widgetsClick(index);
+    },
     // 如果是点击大屏设计器中的底层，加载大屏底层属性
     setOptionsOnClickScreen() {
       this.screenCode = "screen";
@@ -523,6 +546,10 @@ export default {
 
     // 如果是点击某个组件，获取该组件的配置项
     setOptionsOnClickWidget(obj) {
+      if (typeof obj == "number") {
+        this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
+        return;
+      }
       if (obj.index < 0 || obj.index >= this.widgets.length) {
         return;
       }
@@ -536,7 +563,6 @@ export default {
           }
         }
       });
-      console.log(this.widgets);
     },
     widgetsClick(index) {
       const draggableArr = this.$refs.widgets;
@@ -547,9 +573,9 @@ export default {
           this.$refs.widgets[i].$refs.draggable.setActive(false);
         }
       }
+      this.setOptionsOnClickWidget(index);
     },
     handleMouseDown() {
-      console.log(1);
       const draggableArr = this.$refs.widgets;
       for (let i = 0; i < draggableArr.length; i++) {
         this.$refs.widgets[i].$refs.draggable.setActive(false);
@@ -557,15 +583,6 @@ export default {
     },
     // 将当前选中的组件，右侧属性值更新
     widgetValueChanged(key, val) {
-      /* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
-      widgets: [{
-        type: 'widget-text',
-        value: {
-          setup:{},
-          data: {},
-          position: {}
-        }
-      }]*/
       if (this.screenCode == "screen") {
         this.dashboard = this.deepClone(val);
       }
@@ -624,6 +641,10 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.is-active {
+  background: #409eff !important;
+  color: #373d41 !important;
+}
 .layout {
   display: -webkit-box;
   display: -ms-flexbox;