1、大屏左侧操作菜单归类

2、代码文件归类 3、添加雷达图

1、大屏左侧操作菜单归类
2、代码文件归类 3、添加雷达图
qianbao
1 parent badbffc5
Showing 10 changed files with 179 additions and 174 deletions
src/mixins/common.js
src/views/bigscreenDesigner/designer/components/datasourceSelect.vue
src/views/bigscreenDesigner/designer/components/dynamicForm.vue
src/views/bigscreenDesigner/designer/index.vue
src/views/bigscreenDesigner/designer/tools/configure/wordcloudCharts/widget-word-cloud.js
src/views/bigscreenDesigner/designer/tools/index.js
src/views/bigscreenDesigner/designer/widget/text/widgetText.vue
src/views/bigscreenDesigner/designer/widget/widget.vue
src/views/screenDesigner/config/configs.js
src/views/screenDesigner/config/texts/screenConfig.js
@@ -138,7 +138,7 @@ export default {
     isNotBlank (val) {
       return !this.isBlank(val)
     },
-    isBlank (val) {
+    isBlankObject (val) {
       if (this.isNull(val)) {
         return true
       }
+<template>
+  <el-form-item prop="master">
+    <el-select
+      size="mini"
+      name="master"
+      v-model="selectedOption"
+      placeholder="请选择"
+      @change="selectDataSet"
+    >
+    <el-option
+      key=""
+      label=""
+      value=""
+    />
+    <el-option
+      v-for="item in dataSet"
+      :key="item.id"
+      :label="item.setName"
+      :value="item.id"
+    />
+    </el-select>
+  </el-form-item>
+</template>
+<script>
+import { queryAllDataSet} from "@/api/bigscreen";
+export default {
+  name: "data-source-select",
+  components: {},
+  model: {
+    prop: "value",
+    event: "input"
+  },
+  props: {
+    value: {
+      type: "",
+      default: ""
+    }
+  },
+  data() {
+    return {
+      selectedOption: {},
+      dataSet: [], // 数据集
+    };
+  },
+  watch: {
+      value: {
+        handler(newValue, oldValue) {
+          if (typeof newValue === "string") {
+            this.selectedOption = newValue;
+          } else {
+            this.selectedOption = this.parseString(newValue);
+          }
+        },
+        immediate: true
+    }
+  },
+  computed: {},
+  created() {
+    this.loadDataSet();
+  },
+  // mounted() {
+  //   this.loadDataSet();
+  // },
+  methods: {
+    async loadDataSet() {
+      const { code, data } = await queryAllDataSet();
+      this.dataSet = data;
+      const selectKey = this.value;
+      if (code != "200"){
+        return
+      }else{
+        for (let i = 0; i < this.dataSet.length; i++) {
+          let item = this.dataSet[i];
+          if (item.id == selectKey) {
+            this.selectedOption = this.dataSet[i];
+          }
+        }
+      }
+    },
+    //选中，回刷父节点
+    async selectDataSet() {
+      this.$emit("input", this.selectedOption);
+      this.$emit("change", this.selectedOption);
+    },
+    // 数据集回显
+    async echoDataSet(val) {
+      if (!val) return;
+      //改变全局数据集 动态获取数据(获取根据数据源ID)改变静态组件的值
+
+    },
+  }
+};
+</script>
@@ -60,13 +60,18 @@
               v-model="formData[item.name]"
               @change="val => changed(val, item.name)"
             />
+            <DatasourceSelect
+              v-if="item.type == 'data-source-select'"
+              v-model="formData[item.name]"
+              @change="changed($event, item.name)">
+            </DatasourceSelect>
             <CustomUploadNew v-if="item.type == 'custom-upload-new'"
               v-model="formData[item.name]"
               @change="changed($event, item.name)">
             </CustomUploadNew>
-            <CustomUploadMulti v-if="item.type == 'custom-upload-multi'"
+            <CustomUploadMulti v-if="item.type == 'custom-upload-new'"
               v-model="formData[item.name]"
               @change="changed($event, item.name)">
             </CustomUploadMulti>
@@ -224,7 +229,7 @@
                   <el-upload
                     v-if="itemChildList.type == 'el-upload-picture'"
                     size="mini"
-                    action="https://jsonplaceholder.typicode.com/posts/"
+                    action=""
                     list-type="picture-card"
                   />
@@ -294,6 +299,7 @@ import dynamicAddTable from &quot;./dynamicAddTable.vue&quot;;
 import customUpload from "./customUpload.vue";
 import dynamicAddRadar from "./dynamicAddRadar";
 import CustomUploadNew from "./customUploadNew";
+import DatasourceSelect from "./datasourceSelect";
 import CustomUploadMulti from "./customUploadMulti";
 export default {
   name: "DynamicForm",
@@ -306,7 +312,9 @@ export default {
     customUpload,
     dynamicAddRadar,
     CustomUploadNew,
-    CustomUploadMulti
+    CustomUploadMulti,
+    DatasourceSelect,
+
   },
   model: {
     prop: "value",
@@ -317,14 +325,14 @@ export default {
     value: {
       type: [Object],
       default: () => {}
-    }
+    },
   },
   data() {
     return {
       formData: {},
       inputShow: {}, // 控制表单是否显示
       dialogVisibleStaticData: false,
-      validationRules: "",
+      // validationRules: "",
       optionsJavascript: {
         mode: "text/javascript",
         tabSize: 2, // 缩进格式
@@ -305,14 +305,11 @@ export default {
     VueRulerTool,
     widget,
     dynamicForm,
-    contentMenu,
+    contentMenu
   },
   data() {
     return {
-      uploadUrl:
-        process.env.BASE_API +
-        "/reportDashboard/import/" +
-        this.$route.query.reportCode,
+      uploadUrl:process.env.BASE_API +"/reportDashboard/import/" +this.$route.query.reportCode,
       grade: false,
       layerWidget: [],
       widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
@@ -334,10 +331,13 @@ export default {
         height: 1080, // 大屏设计高度
         backgroundColor: "", // 大屏背景色
         backgroundImage: "", // 大屏背景图片
+        master: null, // 全局数据源
+        refreshMasterTime: 600000, // 刷新时间(毫秒)
         refreshSeconds: null, // 大屏刷新时间间隔
         presetLine: [], // 辅助线
         presetLineVisible: true, // 辅助线是否显示
       },
+      masterData:{"sName1":"测试文本1","sName2":"测试文本2"},
       // 大屏的标记
       screenCode: "",
       dragWidgetCode: "", //从工具栏拖拽的组件code
@@ -494,6 +494,7 @@ export default {
       const { code, data } = await detailDashboard(reportCode);
       if (code != 200) return;
       const processData = this.handleInitEchartsData(data);
+
       const screenData = this.handleBigScreen(data.dashboard);
       this.widgets = processData;
       this.dashboard = screenData;
@@ -514,9 +515,11 @@ export default {
       return {
         backgroundColor: (data && data.backgroundColor) || "",
         backgroundImage: (data && data.backgroundImage) || "",
-        height: (data && data.height) || "1080",
+        height: (data && data.height) || 1080,
         title: (data && data.title) || "",
-        width: (data && data.width) || "1920",
+        width: (data && data.width) || 1920,
+        master: (data && data.master) || null,
+        refreshMasterTime: (data && data.refreshMasterTime) || null,
       };
     },
     handleInitEchartsData(data) {
@@ -589,10 +592,13 @@ export default {
           width: this.dashboard.width,
           height: this.dashboard.height,
           backgroundColor: this.dashboard.backgroundColor,
+          refreshMasterTime: this.dashboard.refreshMasterTime,
+          master: this.dashboard.master,
           backgroundImage: this.dashboard.backgroundImage,
         },
         widgets: this.widgets,
       };
+      console.log(screenData);
       const { code, data } = await insertDashboard(screenData);
       if (code == "200") {
         this.$message.success("保存成功！");
@@ -825,14 +831,14 @@ export default {
     },
     // 将当前选中的组件，右侧属性值更新
     widgetValueChanged(key, val) {
-      console.log("key", key);
-      console.log("val", val);
-      console.log(this.widgetOptions);
+      // console.log("key", key);
+      // console.log("val", val);
+      // console.log(this.widgetOptions);
       if (this.screenCode == "screen") {
         let newSetup = new Array();
         this.dashboard = this.deepClone(val);
-        console.log("asd", this.dashboard);
-        console.log(this.widgetOptions);
+        // console.log("asd", this.dashboard);
+        // console.log(this.widgetOptions);
         if (this.bigscreenWidth != this.dashboard.width) {
           this.bigscreenWidth = this.dashboard.width;
         }
@@ -844,12 +850,12 @@ export default {
             el.value = this.bigscreenWidth;
           } else if (el.name == "height") {
             el.value = this.bigscreenHeight;
-          } else if (this.dashboard.hasOwn(el.name)) {
+          } else if (this.hasOwn(el.name)) {
             el["value"] = this.dashboard[el.name];
           }
           newSetup.push(el);
         });
-        console.log(newSetup);
+        // console.log(newSetup);
         this.widgetOptions.setup = newSetup;
       } else {
         for (let i = 0; i < this.widgets.length; i++) {
@@ -255,140 +255,7 @@ export const widgetWordCloud = {
         relactiveDom: 'dataType',
         relactiveDomValue: 'staticData',
         value: [
-          { name: "占道", value: 284 },
-          { name: "水质", value: 71 },
-          { name: "无水", value: 71 },
-          { name: "停供", value: 21 },
-          { name: "停气", value: 11 },
-          { name: "占道", value: 11 },
-          { name: "Nancy", value: 520 },
-          { name: "Jayfee", value: 666 },
-          { name: "生活资源", value: 999 },
-          { name: "供热管理", value: 888 },
-          { name: "供气质量", value: 777 },
-          { name: "社会保障", value: 407 },
-          { name: "交通运输", value: 516 },
-          { name: "城市交通", value: 515 },
-          { name: "环境保护", value: 483 },
-          { name: "城乡建设", value: 449 },
-          { name: "公共安全", value: 406 },
-          { name: "供热管理", value: 375 },
-          { name: "市容环卫", value: 355 },
-          { name: "粉尘污染", value: 335 },
-          { name: "噪声污染", value: 324 },
-          { name: "医疗卫生", value: 284 },
-          { name: "供热发展", value: 254 },
-          { name: "房地产管理", value: 462 },
-          { name: "生活噪音", value: 253 },
-          { name: "城市供电", value: 223 },
-          { name: "大气污染", value: 223 },
-          { name: "房屋安全", value: 223 },
-          { name: "文化活动", value: 223 },
-          { name: "拆迁管理", value: 223 },
-          { name: "公共设施", value: 223 },
-          { name: "供气质量", value: 223 },
-          { name: "供电管理", value: 223 },
-          { name: "燃气管理", value: 152 },
-          { name: "教育管理", value: 152 },
-          { name: "医疗纠纷", value: 152 },
-          { name: "执法监督", value: 152 },
-          { name: "设备安全", value: 152 },
-          { name: "政务建设", value: 152 },
-          { name: "宏观经济", value: 152 },
-          { name: "教育管理", value: 112 },
-          { name: "社会保障", value: 112 },
-          { name: "分类列表", value: 112 },
-          { name: "农业生产", value: 112 },
-          { name: "物业服务", value: 92 },
-          { name: "物业管理", value: 92 },
-          { name: "低保管理", value: 92 },
-          { name: "执法争议", value: 72 },
-          { name: "占道堆放", value: 71 },
-          { name: "地上设施", value: 71 },
-          { name: "主网原因", value: 71 },
-          { name: "集中供热", value: 71 },
-          { name: "客运管理", value: 71 },
-          { name: "治安案件", value: 71 },
-          { name: "群众健身", value: 41 },
-          { name: "市场收费", value: 41 },
-          { name: "生产资金", value: 41 },
-          { name: "生产噪声", value: 41 },
-          { name: "农村低保", value: 41 },
-          { name: "劳动争议", value: 41 },
-          { name: "医疗事故", value: 21 },
-          { name: "基础教育", value: 21 },
-          { name: "职业教育", value: 21 },
-          { name: "拆迁补偿", value: 21 },
-          { name: "设施维护", value: 21 },
-          { name: "市场外溢", value: 11 },
-          { name: "占道经营", value: 11 },
-          { name: "树木管理", value: 11 },
-          { name: "供气质量", value: 11 },
-          { name: "燃气管理", value: 11 },
-          { name: "市容环卫", value: 11 },
-          { name: "新闻传媒", value: 11 },
-          { name: "人才招聘", value: 11 },
-          { name: "市场环境", value: 11 },
-          { name: "城市交通", value: 11 },
-          { name: "物业服务", value: 11 },
-          { name: "物业管理", value: 11 },
-          { name: "园林绿化", value: 11 },
-          { name: "有线电视", value: 11 },
-          { name: "社会治安", value: 11 },
-          { name: "林业资源", value: 11 },
-          { name: "体育活动", value: 11 },
-          { name: "低保管理", value: 11 },
-          { name: "劳动争议", value: 11 },
-          { name: "粉煤灰污染", value: 284 },
-          { name: "人行道管理", value: 71 },
-          { name: "身份证管理", value: 71 },
-          { name: "房地产开发", value: 11 },
-          { name: "经营性收费", value: 11 },
-          { name: "一次供水问题", value: 11 },
-          { name: "工业粉尘污染", value: 71 },
-          { name: "工业排放污染", value: 41 },
-          { name: "破坏森林资源", value: 41 },
-          { name: "生活用水管理", value: 688 },
-          { name: "一次供水问题", value: 588 },
-          { name: "公交运输管理", value: 386 },
-          { name: "自然资源管理", value: 355 },
-          { name: "土地资源管理", value: 304 },
-          { name: "生活用水管理", value: 112 },
-          { name: "供热单位影响", value: 253 },
-          { name: "二次供水问题", value: 112 },
-          { name: "城市公共设施", value: 92 },
-          { name: "拆迁政策咨询", value: 92 },
-          { name: "县区、开发区", value: 152 },
-          { name: "文娱市场管理", value: 72 },
-          { name: "商业烟尘污染", value: 72 },
-          { name: "供热单位影响", value: 71 },
-          { name: "压力容器安全", value: 71 },
-          { name: "劳动合同争议", value: 41 },
-          { name: "物业资质管理", value: 21 },
-          { name: "农村基础设施", value: 11 },
-          { name: "行政事业收费", value: 11 },
-          { name: "房屋配套问题", value: 11 },
-          { name: "公交运输管理", value: 11 },
-          { name: "社会福利及事务", value: 11 },
-          { name: "食品安全与卫生", value: 11 },
-          { name: "物业服务与管理", value: 112 },
-          { name: "文体与教育管理", value: 406 },
-          { name: "社会保障与福利", value: 429 },
-          { name: "出租车运营管理", value: 385 },
-          { name: "物业服务与管理", value: 304 },
-          { name: "房屋质量与安全", value: 223 },
-          { name: "劳动报酬与福利", value: 41 },
-          { name: "食品安全与卫生", value: 11 },
-          { name: "房屋与图纸不符", value: 11 },
-          { name: "其他行政事业收费", value: 11 },
-          { name: "农村土地规划管理", value: 254 },
-          { name: "社会保障保险管理", value: 92 },
-          { name: "城市交通秩序管理", value: 72 },
-          { name: "户籍管理及身份证", value: 11 },
-          { name: "公路（水路）交通", value: 11 },
-          { name: "国有公交（大巴）管理", value: 71 },
-          { name: "有线电视安装及调试维护", value: 11 },
-          { name: "市政府工作部门（含部门管理机构、直属单位）", value: 11 },
+          { name: "占道", value: 284 }
         ],
       },
       {
@@ -47,6 +47,22 @@ const screenConfig = {
         value: ''
       },
       {
+        type: 'data-source-select',
+        label: '全局数据源',
+        name: 'master',
+        required: false,
+        placeholder: '全局数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
+        value: ''
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshMasterTime',
+        value: '600000',
+        required: false,
+        placeholder: '毫秒',
+      },
+      {
         type: 'vue-color',
         label: '背景颜色',
         name: 'backgroundColor',
@@ -55,7 +71,7 @@ const screenConfig = {
         value: 'rgba(45, 86, 126, 1)',
       },
       {
-        type: 'custom-upload',
+        type: 'custom-upload-new',
         label: '图片地址',
         name: 'backgroundImage',
         required: false,
-<!--
- * @Author: lide1202@hotmail.com
- * @Date: 2021-3-13 11:04:24
- * @Last Modified by:   lide1202@hotmail.com
- * @Last Modified time: 2021-3-13 11:04:24
- !-->
 <template>
   <div class="text" :style="styleColor">{{ styleColor.text }}</div>
 </template>
@@ -65,7 +59,15 @@ export default {
       const optionsData = this.optionsData; // 数据类型 静态 or 动态
       if (optionsData.dataType == "dynamicData") {
         this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
-      } else {};
+      } else {
+        console.log("静态数据",this,this.master,this.masterData);
+        //父数据不为空，
+        // if(this.isBlankObject(this.masterData)){
+        //
+        //
+        // }
+
+      };
     },
     dynamicDataFn(val, refreshTime) {
       if (!val) return;
-<!--
- * @Author: lide1202@hotmail.com
- * @Date: 2021-3-13 11:04:24
- * @Last Modified by:   lide1202@hotmail.com
- * @Last Modified time: 2021-3-13 11:04:24
- !-->
 <template>
   <avue-draggable
     :step="step"
@@ -100,14 +94,14 @@ export default {
     widget-text widget-marquee widget-href widget-time widget-image widget-slider widget-video widget-table widget-iframe widget-universal
     widget-linechart widget-barlinechart widget-piechart widget-hollow-piechart widget-funnel widget-gauge widget-china-map
     */
-    index: Number, // 当前组件，在工作区变量widgetInWorkbench中的索引
+    // 当前组件，在工作区变量widgetInWorkbench中的索引
+    index: Number,
     type: String,
-    bigscreen: Object,
     value: {
       type: [Object],
       default: () => {}
     },
-    step: Number
+    step: Number,
   },
   data() {
     return {
@@ -117,7 +111,7 @@ export default {
         position: {},
 /*        leftMargin: null,
         topMargin: null*/
-      }
+      },
     };
   },
   computed: {
@@ -142,6 +136,10 @@ export default {
     handleFocus({ index, left, top, width, height }) {},
     handleBlur({ index, left, top, width, height }) {
       this.$emit("onActivated", { index, left, top, width, height });
+
+      console.log(this.masterData,"2222");
+
+
       this.$refs.draggable.setActive(true);
       // 处理widget超出workbench的问题
       //this.handleBoundary({ index, left, top, width, height })
@@ -12,7 +12,7 @@
  *  词云图：{type: 'wordCloud',tabName: '词云图'}
  * **/
-import { screenConfig } from './texts/screenConfig'
+import {screenConfig} from './texts/screenConfig'
 import {widgetHref} from "./texts/widget-href"
 import {widgetIframe} from "./texts/widget-iframe"
 import {widgetImage} from "./texts/widget-image"
@@ -45,6 +45,20 @@ export const screenConfig = {
         placeholder: '',
       },
       {
+        type: 'data-source-select',
+        label: '全局数据源',
+        name: 'master',
+        required: false,
+        placeholder: '全局数据源[List:sName、sValue] ',/**LIST sName、sValue 后台代码自动转成 sName:sValue Map形式*/
+        value: ''
+      },
+      {
+        type: 'el-input-number',
+        label: '刷新时间(毫秒)',
+        name: 'refreshMasterTime',
+        value: '600000',
+      },
+      {
         type: 'vue-color',
         label: '背景颜色',
         name: 'backgroundColor',
@@ -53,7 +67,8 @@ export const screenConfig = {
         value: '#000',
       },
       {
-        type: 'custom-upload',
+        // type: 'custom-upload',
+        type: 'custom-upload-new',
         label: '图片地址',
         name: 'backgroundImage',
         required: false,